HTML5 Drag and Drop
Drag and Drop
The drag-and-drop feature allows us to grab an object and drag it to a different location. To make an element draggable, we just need to set the draggable attribute to true of that element.
What to Drag:-
When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data.
Where to Drop:-
The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event.
Do the Drop:-
When the dragged data is dropped, a drop event occurs. The ondrop attribute calls a function, drop(event):
For your information:-
The preventDefault() method prevents the browser's default handling of the data. The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
