Create Drag and Drop Features in HTML5

Before HTML5, if you wanted to implement drag and drop features in the browser you had to use libraries such as jQuery and MooTools. Now you have HTML5 Drag and Drop, which gives you the ability to drag, drop, and transfer data natively within the browser. While Drag and Drop is a new API included in HTML5, it was – amazingly – first implemented in IE5, back in 2005 when Ian Hickson worked on the HTML5 API.

The Drag and Drop API adds seven new events HTML elements can listen out for; these can be used to monitor a drag and drop. The events dragstart, drag, dragend, dragenter, dragleave, dragover and drop can be split into elements that can be dragged and elements that can have items dropped into them.

Elements that are dragged can trigger three events:

• dragstart: triggered when dragging a draggable element.
• drag: triggered when the draggable element is moved.
• dragend: triggered when the drag and drop operation ends.

Elements that can receive draggable elements can trigger four events:

• dragenter: triggered when a draggable object is dragged over an element.
• dragleave: triggered when a draggable object is dragged outside of an element.
• dragover: triggered when a draggable object is moved inside an element.
• drop: triggered when a draggable object is dropped.