Native HTML5 Drag and Drop

HTML5 Drag and Drop

To check Browser support:

if (Modernizr.draganddrop) {
  // Browser supports HTML5 DnD.
} else {
  // Fallback to a library solution.
}

Drag-able element:

Its very easy to create a drag-able element draggable=true.

<div id="draggablecontainer">
  <div class="a" draggable="true">draggable-A</div>
  <div class="b" draggable="true">draggable-B</div>
</div>

Dragging Events:

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

var cols = document.querySelectorAll('#draggablecontainer .a');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});