Drag and Drop

The Drag and Drop event is the well known properties of Html5. It is powerful User Interface concept which makes it easy to copy, move, reorder and deletion of objects with the help of mouse. It is supported by all the major browsers.

Drag and Drop Events

There are number of events which are required to create various stages of the drag and drop operation. Here is the list of events -

• dragstart - Script to be run when the user starts dragging of the object.
• dragenter - Script to be run when the mouse is first moved over the target element while a drag is occurring. It indicate whether a drop is allowed over this location.
• dragover - Script to be run as dragenter most of the time.
• dragleave - Script to be run when the mouse leaves an element while a drag is occurring. It remove any highlighting or insertion markers used for drop feedback.
• drag - Script to be run every time the mouse is moved while the object is being dragged.
• drop - Script to be run on the element where the drop was occurred at the end of the drag operation. It would be responsible for retrieving the data being dragged and inserting it at the drop location.
• dragend - Script to be run when the user releases the mouse button while dragging an object.