All about Javascript drag and drop

Looking on interactive designs of drag and drop I found it pretty useful in front end. Drag and drop have several Javascript events that are fired on different position of draggable elements. However, browser support is still a challenge to tackle out.

I found several Javascript events for draggable elements but before that a few things about HTML5 draggable attribute.

<div draggable='true'>I am Draggable</div>

Now this makes a container draggable, now the image below describes the steps of dragging an element.

There are three steps in drag and drop that is pick, drag and then drop. But Javascript allows you to do several function during these three steps.

dragstart

dragstart is the function triggered when object drag is started.

drag

The event is triggered when the dragging object moves a single pixel.

dragenter

The function is fired on the element on which the draggable enters.

dragover

The function is triggered on an element on which the draggable object is dragging. By default the draggable object can't be dropped anywhere, but using dragover function you can make the element where any object can be dropped.

var trash=document.getElementById('trash');

function dropit(event){
  // Draggable can be dropped
 event.preventDefault();
}

trash.addEventListener("dragover",dropit);

dragleave

The function is triggered on the element when the draggable left the element.

drop

The drop function is triggered when the object is dropped on an element. It is necessary that the draggable should be dropped on a droppable element.

dragend

This function is triggered when the drag ends, no matter successful or unsuccessful.

Demo

See the Pen Drag And Drop by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Examples and Inspirations

See the Pen Html5: Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.

For more drag and drop cool inspirations go to Codrops.