HTML5 Drag and Drop, TutorialsPoint, HTML5 Drag and Drop Tutorial

HTML5 Drag and Drop

HTML Drag and Drop interfaces enable applications to use drag and drop features in Google Crome, Safri, Firefox and other browsers. For example, with these features, the user can select draggable elements with a mouse, drag the elements to a droppable element, and drop those elements by releasing the mouse button.

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.

DRAG AND DROP EVENTS

At every stage of the drag and drop operation a different event is fired so that the browser knows what JavaScript code to execute; the events are:

dragStart :- fires when the user starts dragging the element.

dragEnter :- fires when the draggable element is first dragged over the target element.

dragOver :- fires when the mouse is moved over an element when the drag is occurring.

dragLeave :- fired if the userâ€™s cursor leaves an element when dragging.

drag : - fires every time we move the mouse during the dragging of our element.

drop : - fired when the actual drop is performed.

dragEnd :- fires when the user releases the mouse while dragging the object.

THE DATATRANSFER OBJECT

dataTransfer.effectAllowed=value :- This returns the types of action permitted, possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.

dataTransfer.setData(format, data) :- adds the specified data and its format.

dataTransfer.clearData( format ) :- clears all the data for a specific format.

dataTransfer.setDragImage(element, x, y) :- sets the image you wish to drag, the x and y values specify where the mouse cursor should be (0, 0 will place it top left).

data = dataTransfer.getData(format) :- As the name says it returns the data available for a specific format.

DRAG AND DROP PROCESS

<!DOCTYPE HTML>
<html>
   <head>
      
      <style type="text/css">
         #firstbox, #secondbox {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         
         #firstbox { background-color: #F60; width:100px; height:80px; color:#FFF; }
         #secondbox { background-color: #069; width:100px; height:80px; color:#FFF; }
      </style>
      
      <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;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>HTML5 Drag and drop </h2>
         <div>Try to drag the Blue Box.</div>
       </center>
       <center>
         <div id="firstbox" draggable="true" 
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id="secondbox">Secondbox</div>
      </center>
      
   </body>
</html>

Output :

HTML5 Drag and drop

Try to drag the Blue Box.

Drag Me

Secondbox

HTML5 Tutorial