HTML Drag/Drop
Any element in HTML can be dropped and dragged(HTML Drag/Drop).
Example
Drag the CodingAsk image into the rectangle.
Drag and Drop
Drag and drop is a functionality that is widely used. It occurs when you “grab” something and move it to a new spot.
Browser Support
The first browser version that fully supports Drag and Drop is shown by the numbers in the table.
CODE MUKVO
HTML Drag and Drop Example
An illustration of basic drag and drop is provided below:
Example
CODE MUKVO
Although it may appear intricate, let’s go over each component of a drag and drop event.
Make an Element Draggable
First things first: Set the draggable attribute to true to make an element draggable:
CODE MUKVO
What to Drag - ondragstart and setData()
Next, indicate the desired action to be taken when the element is dragged.
The aforementioned example uses the ondragstart attribute to call the drag(event) method, which defines the data to be dragged.
The dragged data’s value and data type are set via the dataTransfer.setData() method:
CODE MUKVO
The id of the draggable element (“drag1”) is the value in this instance, and the data type is “drag1”.
Where to Drop - ondragover
The location of the dropped dragged data is specified by the ondragover event.
Data and/or elements cannot by default be dropped into other components. We have to stop the element from being handled by default in order to permit a drop.
Calling the event.preventDefault() function for the ondragover event accomplishes this:
CODE MUKVO
Do the Drop - ondrop
A drop event happens when the data that was dragged is dropped.
The ondrop property in the aforementioned example invokes the drop(event) function:
CODE MUKVO
Code explained:
- Use preventDefault() to override the browser’s default behavior, which is to open the data as a link upon drop.
- Use the dataTransfer.getData() function to retrieve the dragged data. Any data that was set to the same type in the setData() function will be returned by this method.
- The dragged element’s id (“drag1”) is the dragged data.
- The dragged element should be appended to the drop element.
HTML drag/drop
draggable
ondragstart
setData()
ondragover
preventDefault()
ondrop
dataTransfer
browser support
HTML5
web developmentHTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML, drag and drop, draggable, ondragstart, setData(), ondragover, preventDefault(), ondrop, dataTransfer, browser support, HTML5, web development
—
HTML Drag and Drop: Bringing Interactivity to Your Web Pages
In the ever-evolving world of web development, the ability to create dynamic and interactive user experiences is paramount. One such feature that has gained significant traction is the HTML Drag and Drop functionality, which allows users to seamlessly interact with elements on a web page.
At its core, HTML Drag and Drop relies on a set of events and methods that work in tandem to facilitate the dragging and dropping of elements. The key elements involved in this process include the `draggable` attribute, the `ondragstart` event, the `setData()` method, the `ondragover` event and the `preventDefault()` method, the `ondrop` event, and the `dataTransfer` object.
By leveraging these features, web developers can create a wide range of interactive experiences, from rearranging page elements to enabling file uploads and more. It’s important to note that the HTML Drag and Drop functionality is part of the HTML5 specification and enjoys relatively broad browser support, making it a versatile tool in the web development arsenal.
As you delve into the world of HTML and web development, understanding the intricacies of Drag and Drop can open up a world of possibilities for creating engaging and user-friendly web applications.
