HTML5 Drag and Drop Events

HTL5 drag and drop events extend the DOM mouse events. As a result, we still work with the same old low-level mouse information as we did when used JavaScript code to implement drag and drop. As a result, some of the concepts behind HTML5 drag and drop will be familiar to you.

Let us look at the HTML drag and drop event flow in order to understand how HTML5 executes drag and drop operation throughout the course of dragging and dropping objects on web pages.

DRAGSTART - First event we’ll look at is a dragstart event. The dragstart event is fired on the object when user starts dragging it. This event is essential for setting dataTransfer on the object with the help of setData call. This is an important point as we’ll require to know what time of data is being dropped at the target of this drop.
DRAG – second important event in order to execution is the drag event. It is a continues event that is live during actual dragging of the object. This event is called multiple times while dragging of the object is in progress.
DRAGENETER – third important event during drag and drop operation is drageneter event which is being fired during cross over with other elements on the page. This event is used primarily for drop feedback.
DRAGLEAVE – fourth event that we need to pay attention to is called dragleave event. This event is direct opposite to drageneter event as it is being fired when draggable object leaves priory crossed element on a web page.
DRAGOVER – fifth event on our list. It is being called in intervals as soon as our object moves over other elements on the page.
DROP – next to last event is called on the current target when we release the mouse. This event is useful at the time of the object drop. This is when we can apply code to our dataTransfer object.
DRAGEND – final event in our chain of drag and drop events. This event is fired on the drag source and indicates that our drag operation has been completed.

In conclusion, we examined all of the events that are being fired during drag and drop operation. All we have left to do is to set object on our form to be draggable. We can do this with the help of HTML5 draggable attribute as shown below: