HTML5 includes new attributes that can be used for Drag and Drop effects.
These are the HTML5 attributes you can use to create drag and drop effects:
            • draggable - This attribute specifies whether an element is draggable or not (values: true, false, or auto).
            • ondrag - This event fires continuously during a drag operation.
            • ondragstart - This event is fired when the user starts to drag the selection.
            • ondragenter - Fires on the target element when the user drags the object to a valid drop target.
            • ondragover - This event fires continuously while the user drags an object over a valid drop target.
            • ondragleave - This event occurs when the user drags an object on the page outside the area of a valid drop target.
            • ondragend - Occurs when the user stops dragging the element (releases the mouse) to which this attribute is applied.
            • ondrop - Occurs on a possible target element when the dragged data is dropped on it; comes immediately after the ondragend event.

- This is the general syntax to use these on... attributes in the HTML tag for drag-and-drop effects:
attribute_name="handler(event)"
- handler(event) - is a function that can be called when the specified event is fired.

• First, to make an element draggable, set the draggable attribute to "true", and add also the ondragstart attribute.
- Syntax to create a draggable element:
<tag draggable="true" ondragstart="handler(event)" id="draggable_elm">Content</tag>

By default, the target of a drag operation can be an editable element (textarea, input:text, input:password, input:search), an element in content editable mode, a document in design mode or another application. If you want to allow for other elements to be a drop target, add the ondrop attribute, and cancel the ondragover event (using the value: "return false", or a function with event.preventDefault()). To be more sure, cancel also the ondragenter event.
- Syntax to create a drop-target element:
<tag id="target_drop" ondrop="someFunction(event)" ondragenter="return false;" ondragover="allowDrop(event)">Drop here</tag>

Examples Drag and Drop

1. A DIV with some content can be dragged and dropped in another DIV.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Drag and Drop HTML5 - JavaScript</title>
<style type="text/css">
#drag1 {
 width: 12em;
 margin: .2em;
 background-color: #02ed03;
 border: 2px dashed #000;
 padding: .2em;
 color: #0001da;
 cursor: pointer;
}
#target_drop1 {
 width: 20em;
 min-height: 3em;
 margin: .2em;
 background-color: #ededfe;
 border: 2px solid #000;
}
</style>
</head>
<body>
<div draggable="true" ondragstart="dragStart(event)" id="drag1">Drag this.<br/>http://www.coursesweb.net/</div>
<div id="target_drop1" ondrop="drop(event)" ondragenter="return false;" ondragover="allowDrop(event)">Drop here</div>
<script>
function allowDrop(ev) {
 ev.preventDefault(); // cancel the ev event
}

// function called when the drag operation starts
function dragStart(ev) {
 // sets the data type and the value of the dragged data
 // This data will be returned by getData(). Here the ID of current dragged element 
 ev.dataTransfer.setData('Text', ev.target.id);
}

// function called when the dragged element is dropped
function drop(ev) {
 ev.preventDefault(); // the dragover event needs to be canceled to allow firing the drop event

 // gets data set by setData() for current drag-and-drop operation (the ID of current dragged element),
 // using for parameter a string with the same format set in setData
 var drag_data = ev.dataTransfer.getData('Text');

 // adds /appends the dropped element in the specified target
 ev.target.appendChild(document.getElementById(drag_data));
}
</script>
</body>
</html>
• In the draggable element, is set: draggable="true", then, the ondragstart="dragStart(event)" specifies what should happen when the users starts dragging the element, calls the dragStart() function that specifies what data to be dragged.
In this function, the code: ev.dataTransfer.setData('Text', ev.target.id); sets the data type (in this case "Text") and the value of the dragged data (the ID of the draggable element).

• In the other DIV, ondragover event specifies where the dragged data can be dropped. Because data/elements cannot be dropped by default in DIV tag, we call a function, allowDrop() that uses the event.preventDefault() method to prevent the default handling of the element.
We use also ondragenter="return false;" to prevent the default handling of the element when it enters in the drop target area.
- With: ondrop="drop(event)" we specify what to happen when the data is dropped, call the drop() function which contains this code:
function drop(ev) {
 ev.preventDefault();
 var drag_data = ev.dataTransfer.getData('Text');
 ev.target.appendChild(document.getElementById(drag_data));
}
- preventDefault() to prevent the browser default handling of the data (default is open as link in browser on drop).
- With the ev.dataTransfer.getData('Text') method we get the dragged data. This method will return any data that was set to the same type ("Text") in the setData() method (in this case, the ID of the dragged element).
- Then, ev.target.appendChild(document.getElementById(drag_data)); appends the dragged element into the drop-target element.

• Results:
Drag this.
http://www.coursesweb.net/
Drop here

.2 Drag and drop an image back and forth between two <div>, by making both DIVs a drop-target element, with the "ondragover" and "ondrop" attributes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Drag and Drop image - HTML5 - JavaScript</title>
<style type="text/css">
#div1, #div2 {
 float: left;
 width: 12em;
 min-height: 65px;
 margin: .2em;
 border: 2px solid #000;
 padding: .2em;
}
.todrag {
 cursor: pointer;
}
.dragging {
 border: 1px dashed #00f;
 background: #ff1;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
 <img src="webcourses.gif" draggable="true" ondragstart="dragStart(event)" id="drag2" class="todrag" width="191" height="63" alt="Drag-and-Drop image" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br style="clear:both" />
<script>
function allowDrop(ev) {
 ev.preventDefault(); // cancel the ev event
}

// function called when the drag operation starts
function dragStart(ev) {
 // sets the data type and the value of the dragged data
 // This data will be returned by getData(). Here the ID of current dragged element 
 ev.dataTransfer.setData('Text', ev.target.id);

 // sets another css class
 ev.target.className = 'dragging';
}

// function called when the dragged element is dropped
function drop(ev) {
 ev.preventDefault(); // the dragover event needs to be canceled to allow firing the drop event

 // gets data set by setData() for current drag-and-drop operation (the ID of current dragged element),
 // using for parameter a string with the same format set in setData
 var drag_data = ev.dataTransfer.getData('Text');

 // adds /appends the dropped element in the drop-target
 ev.target.appendChild(document.getElementById(drag_data));

 // sets another css class
 document.getElementById(drag_data).className = 'todrag';
}
</script>
</body>
</html>
- Demo :

Click, drag and drop the image from one rectangle to another and back.

Drag-and-Drop image

HTML5 draggable is useful to drag and drop items from one HTML element to another, but it is not useful to implement rich drag and drop interfaces. In this case use jQuery or other JavaScript library.
If you want for example to constrain dragging an object within a boundary, use jQuery UI, see the Example 4 from this tutorial: jQuery UI draggable - Drag elements.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Drag and Drop with HTML5 attributes

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)