HTML Intro

HTML Intro Quiz

HTML Intro Exercise

HTML Basics

HTML Basic Quiz

HTML Basic Exercise

HTML Advance

HTML Advance Quiz

HTML Advance Exercise

HTML Tags List

HTML Global Attributes

HTML Attributes


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.

Code Explanation

All Tutorials related to HTML Advance

All Sections related to HTML