Approach for Drag and Drop in HTML
- Set an element as draggable with the
draggableattribute:<img draggable="true">. - Specify the drag behavior using the
ondragstartattribute, calling a function (drag(event)) to define the data to be dragged withevent.dataTransfer.setData(). - Utilize the
ondragoverevent to determine where the data can be dropped. Prevent default behavior withevent.preventDefault()to enable the drop. - Implement the
ondropevent to perform the actual drop action.
HTML Drag and Drop
Drag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it. This allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there.
Table of Content
- Drag and Drop Events
- The Data Transfer Object
- Approach for Drag and Drop in HTML
- Examples Showing Drag and Drop in HTML
In HTML5 Drag and Drop are much easier to code and any element in it is draggable.