Web Technologies - HTML5

Back to Course

Lesson Description

Lession - #590 HTML5 Drag Drop

Drag and Drop (DnD>
is powerful user interface concept that makes it easy to copy, reorder and deletion of items with the help of mouse clicks. this enables the user to click and hold the mouse button down over part, drag it to another location, and release the mouse button to drop the element there

HTML 5 came up with a drag and Drop (DnD>
API that brings native DnD support to the browser making it a lot of easier to code up.

HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and safari 4 etc.

Drag and Drop Events
There are number of events which ar fired during varied stages of the drag and drop operation. These events are listed below −

1 dragstart
Fires when the user starts dragging of the object.

2 dragenter
Fired once the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether or not a drop is allowed over this location. If there are not any listeners, or the listeners perform no operations, then a drop isn't allowed by default.

3 dragover
This event is fired because the mouse is captive over an element once a drag is occurring. a lot of of the time, the operation that happens during a listener will be the same as the dragenter event.

4 dragleave
This event is fired when the mouse leaves an element whereas a drag is occurring. Listeners ought to remove any highlighting or insertion markers used for drop feedback.

5 drag
Fires every time the mouse is moved while the thing is being dragged.

6 drop
The drop event is fired on the element where the drop was occurred at the top of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

7 dragend
Fires when the user releases the mouse button while dragging an object.

The DataTransfer Object
The event listener methods for all the drag and drop events settle for Event object which has a readonly attribute called dataTransfer.

function EnterHandler(event>


      <meta charset = "UTF-8"> 
      <title> HTML5 Example< /title> 
	   <style type = "text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      <script type = "text/javascript">
         function dragStart(ev>
{ ev.dataTransfer.effectAllowed = 'move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id'>
; ev.dataTransfer.setDragImage(ev.target,0,0>
; return true; } </head> </body> <h2> Drag and drop HTML5 demo</h2> <div> Try to drag the purple box around.</div> <div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev>
"> <p> Drag Me</p> </div> <div id = "boxB"> Dustbin</div> </body> </html>

Try it here