Drag and Drop in HTML with Examples

In this article, I am going to discuss Drag and Drop in HTML with Examples. Please read our previous article, where we discussed Multimedia in HTML with Examples.

Drag and Drop in HTML

The HTML Drag and Drop functionality allows users to drag and drop elements in browsers. The user can click and hold the mouse button over a draggable element, drag it to another position, and then release the mouse button to drop the element at a specific position.

To make drag and drop simpler HTML 5 came up with a Drag and Drop API that makes it easier for developers to code up. Html 5 DnD API is supported by all major browsers including chrome, firefox, and Safari.

HTML Drag and Drop Events

Several events are triggered at various phases of the drag and drop process. These events are as follows:

ondrag: When an element or text selection is dragged in HTML, this property is used.
ondragstart: It is used to invoke the drag(event) function, which specifies the data to be dragged.
ondragenter: It triggers when the user moves his or her mouse cursor over the target element.
ondragleave: It happens when the mouse moves away from a valid drop target while the drag is in process.
ondragover: It defines the location where dragged data can be dropped.
ondrop: It indicates the location of the drop at the end of the drag operation.
ondragend: It occurs after the user has completed dragging an element.

It is important to note that only drag events are fired during a drag operation; mouse events such as mousemove are not fired.

Drag and Drop Process in HTML

The steps to implement the Drag and Drop operation are as follows.

Step 1 – Making an Object Draggable

You must set the draggable attribute of an element to true if you want to drag it.

<table draggable = “true”>

Set an event listener for dragstart to save the data being dragged.

Step 2 – Dropping the Object

The drop target must listen to at least three events in order to accept a drop.

The dragenter event determines whether or not the drop target will accept the drop. This event must be canceled if the drop is to be accepted.
The dragover event, determines what feedback is shown to the user. If the event is canceled, the feedback is modified based on the value of the dropEffect attribute.
Finally, there is the drop event, which allows the drop to take place.

HTML Drag and Drop Example

<!DOCTYPE HTML>
<html>
<head>
 <style>
    body{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:15px;}
 #getData {
  width: 250px;
  height: 200px;
  padding: 10px;
  ;
 }
 </style>
 <script>
 function allowDrop(ev) {
  ev.preventDefault();
 }

 function drag(ev) {
  ev.dataTransfer.setData("image", ev.target.id);
 }

 function drop(ev) {
  ev.preventDefault();
  var fetchData = ev.dataTransfer.getData("image");
  ev.target.appendChild(document.getElementById(fetchData));
 }
 </script>
</head>
<body>
 <h3>Try to Drag the paper into Dustbin:</h3>
    	<img id="dragData"
  src="https://cdn.pixabay.com/photo/2013/07/12/12/48/garbage-146279_960_720.png"
  draggable="true"
  ondragstart="drag(event)"
  width="100"
  >
 <img id="getData"
  ondrop="drop(event)"
  ondragover="allowDrop(event)"
       src="https://cdn.pixabay.com/photo/2021/08/30/22/33/bin-6587274_960_720.png">
 <br>
</body>
</html>

Before Dragging

After Dragging

What to Drag – ondragstart and setData()

In the above example, the ondragstart attribute invokes a function, drag(event), which defines the data to be dragged. The dataTransfer.setData() method determines the data type and value of dragged data. In this case, the data type is “image”.

Where to Drop – ondragover

The ondragover event defines the location where the dragged data can be dropped. Data cannot be dropped into other elements by default. To allow a drop, we must change the element’s default behavior. This is accomplished by invoking the preventDefault() method.

Do the Drop – ondrop

A drop event occurs when the dragged data is dropped. In the above example, the ondrop property invokes a function, drop(event)

In the next article, I am going to discuss HTML Geolocation and Maps with examples. Here, in this article, I try to explain Drag and Drop in HTML with Examples and I hope you enjoy this Drag and Drop in HTML with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.