HTML5 Drag and Drop

Drag and Drop is part of HTML5 standard. HTML Drag and Drop will enable applications to use drag and drop features in all kinds of browsers.
In simple, Drag and Drop is a very common feature which enables you to grab an object and drag it to any location specified by the user.

Drag and Drop Events

There are number of events which are fired during various stages of the drag and drop operation. These events are listed below −

• dragstart: It is invoked when the user starts dragging the object.
• dragenter: It is invoked when the mouse is first moved over the target element while a drag is going to occur.
• Drag: This event is invoked every time the mouse is moved while the object is being dragged.
• Dragover: It is invoked when the mouse is moved over an element when a drag occurs.
• Dragleave: It is invoked when the mouse leaves an element while a drag occurs.
• Drop: The drop event is invoked on the element where drop occurs at the end of the drag operation.
• Dragend: It is invoked when the user releases the mouse button while dragging an object.

Now let us look into a simple Drag and Drop example.
The example below is a simple drag and drop example:

Now let’s look into how this code works. Let’s begin with the first function:

function allowDrop(ev) {
ev.preventDefault();
}

The call to preventDefault() function is to prevent the browser default handling of the data. This function allows the image to be dropped in the required location.
Let us now see “How to make an Element Draggable?”

Follow these steps to make an element draggable:
To make an element draggable, we need to set the draggable attribute to true:

<img draggable=”true”>

Let’s look into drag function.

function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}
The dataTransfer.setData() is used to set the drag operation’s drag data to the specified data and type. In our case, the data type is “text” and the value is the id of the draggable element (“drag1”). The dragged data is the id of the dragged element (“drag1”).

Let’s look into drop function.

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
When the dragged data is dropped, a drop event occurs. The ondrop attribute calls a function, drop(event)

<div ondrop=”drop(event)”>

Now comes the final step – Where to drop the element?

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
The ondragover event is used to specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This can be done by calling the event.preventDefault() method for the ondragover event.

Conclusion:

I hope you have understood how to drag and drop the elements. If you have any other query do write us at support@acadgild.com