HTML Drag and Drop interfaces enable applications to use drag and drop features in Google Crome, Safri, Firefox and other browsers. For example, with these features, the user can select draggable elements with a mouse, drag the elements to a droppable element, and drop those elements by releasing the mouse button.
Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.
DRAG AND DROP EVENTS
dragStart :- fires when the user starts dragging the element.
dragEnter :- fires when the draggable element is first dragged over the target element.
dragOver :- fires when the mouse is moved over an element when the drag is occurring.
dragLeave :- fired if the user’s cursor leaves an element when dragging.
drag : - fires every time we move the mouse during the dragging of our element.
drop : - fired when the actual drop is performed.
dragEnd :- fires when the user releases the mouse while dragging the object.
THE DATATRANSFER OBJECT
dataTransfer.effectAllowed=value :- This returns the types of action permitted, possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
dataTransfer.setData(format, data) :- adds the specified data and its format.
dataTransfer.clearData( format ) :- clears all the data for a specific format.
dataTransfer.setDragImage(element, x, y) :- sets the image you wish to drag, the x and y values specify where the mouse cursor should be (0, 0 will place it top left).
data = dataTransfer.getData(format) :- As the name says it returns the data available for a specific format.