HTML5 Drag and Drop

Drag and Drop an Element

The HTML5 drag and drop feature enables users to move an element by dragging it and dropping it into another location, which can be within the same application or even in a different application. As the element is dragged, a translucent representation of it follows the mouse pointer.

Let's explore the following example to grasp the basic functionality:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Drag and Drop</title>
<script>
function dragStart(e) {
// Sets the operation allowed for a drag source
e.dataTransfer.effectAllowed = "move";

// Sets the value and type of the dragged data
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
// Prevent the browser default handling of the data
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
// Cancel this event for everyone else
e.stopPropagation();
e.preventDefault();

// Retrieve the dragged data by type
var data = e.dataTransfer.getData("Text");

// Append image to the drop box
e.target.appendChild(document.getElementById(data));
}
</script>
<style>
#dropBox {
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 25px;
}
</style>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped image will be inserted here-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>

Tip: You can enable an element to be draggable by setting the draggable attribute to true, like draggable="true". In many web browsers, text selections, images, and links with an href attribute can be dragged by default.

Drag and Drop Events

Several events are triggered during different stages of a drag and drop operation. However, mouse events such as mousemove are not triggered during a drag operation.

The following table provides a brief overview of all the drag and drop events:

Event	Description
`ondragstart`	Fires when the user starts dragging an element.
`ondragenter`	Fires when a draggable element is first moved into a drop listener.
`ondragover`	Fires when the user drags an element over a drop listener.
`ondragleave`	Fires when the user drags an element out of drop listener.
`ondrag`	Fires when the user drags an element anywhere; fires constantly but can give X and Y coordinates of the mouse cursor.
`ondrop`	Fires when the user drops an element into a drop listener successfully.
`ondragend`	Fires when the drag action is complete, whether it was successful or not. This event is not fired when dragging a file to the browser from the desktop.

Note: HTML5's drag and drop functionality works well on the latest versions of popular web browsers, including Firefox, Chrome, Opera, Safari, and Internet Explorer 9 and later.