13 - HTML5 Drag and Drop

In HTML5, you can drag and drop HTML elements within a web page. You can decide the behavior of the elements while being dragged and dropped using JavaScript. You can use this technique to copy, delete or reorder items using mouse. You just have to click the mouse button to hold the item, drag it to allowed drop zone and release the mouse button to drop the item there.

To implement drag and drop functionality, there need to be two HTML elements each with at least one role: draggable and drop zone. The draggable element is the element that can be dragged around and dropped somewhere. The drop zone is the element on which the draggable element is dropped. Each element can take more than one role and more than element can take the same role.

Drag and Drop Events

As already mentioned, you can decide the behavior of the elements while being dragged and dropped using JavaScript. During the drag and drop operation, a number of events get fired and they are:

dragstart: This event gets fired when the user starts dragging the object.

dragend: This event gets fired when the drag is over and the user releases the mouse button.

dragenter: This event gets fired when the mouse is first moved over the drop zone.

dragover: This event keeps on firing as long as the draggable element is being dragged over the drop zone.

dragleave: This event gets fired when the user drags the draggable object out of the drop target.

drop: This event is fired when the user drops the draggable object on the drop zone.

The dragstart and dragend are event listeners for the draggable element and dragenter, dragover, dragleave and drop are event listeners for the drop zone.

DataTransfer Object

All the event listener methods we have already discussed accept Event object. This object has only a readonly attribute named dataTransfer and it returns a DataTransfer object. This object holds data about the drag and drop operation. Different DataTransfer attributes are:

dropEffect: To get or set the kind of operation that is currently selected

effectAllowed: To get or set the kind of operations that are allowed

setData: To set the specified data. format: setData(format, data)

getData: To get the specified data. format: getData(format)

Drag and Drop Implementation

To implement drag and drop functionality, you first have to make an element draggable by setting the value of draggable attribute to true. Then you need to attach different event listeners to allow dropping. On the dragstart, you can specify what data to be dragged. You can use the dataTransfer.setData() method to set the data type and the value of the dragged data.

To accept a drop, the drop zone needs to listen to at least two events: dragover and drop. On the dragover, you can specify where the dragged data can be dropped. By default, elements are not allowed to be dropped in other elements. So in order to allow a drop, we must prevent the default handling of the element by calling the event.preventDefault() method for the ondragover event.

On the drop, you can get the dragged data using dataTransfer.getData() method and then append the dragged element into the drop zone. You also have to prevent the default handling as default is opening as a link on drop.

Sample Code:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Drag and Drop</title>
   <style type="text/css">
    #draggableBox, #dropZone 
    {
     float:left;
     padding:10px;
     margin:10px;
    }
    #draggableBox 
    { 
      background-color: #FF0088; 
      width:75px; 
      height:75px;  
    }
    #dropZone 
    { 
     background-color: #CD853F; 
     width:150px; 
     height:150px; 
    }
  </style>
  <script type="text/javascript">
   function dragStart(ev) {
       ev.dataTransfer.setData("text", ev.target.id);
   }
   function dragOver(ev) {
    ev.preventDefault();
   }
   function drop(ev) {
     ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
   }
  </script>
 </head>
 <body>
  <div id="draggableBox" draggable="true" ondragstart="dragStart(event)">
   <p>Drag Me</p>
  </div>
  <div id="dropZone" ondrop="drop(event)" 
     ondragover="dragOver(event)">Drop Here</div>
  </body>
</html>

 

 

 

 

 

 

 

Like us on Facebook