Select the red element, drag it to the blue drop area and then release the selection to move the element.
Hello W3context
HTML Drag and Drop
HTML elements can be drag and drop them to other destination element.
We can drag elements to other element by following only three steps.
Step 1
Give an id to the source element and call a method (for example m1(event)) for handler ondragstart
<p id="p1" ondragstart="m1(event)">Hello W3context</p>function m1(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}Explanations
The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation
The DataTransfer.setData(type, data) method sets the drag operation's drag-data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag-data store.
Step 2
Call a method (for example m2(event)) for handler ondrop
<div class="div1" ondrop="m2(event)" width="336px" height="150px"></div>function m2(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}Explanations
The DataTransfer.getData(type) method retrieves drag data (as a string) for the specified type. If the drag operation does not include data, this method returns an empty string.
Get the element for that data (id) and append that element to the destination parent element.
Step 3
Finally allow source element to be draggable by draggable="true", and allow destination element to drop other elements on it by ondragover="event.preventDefault();".
<p id="p1" draggable="true" ondragstart="m1(event)">Hello W3context</p><div class="div1" ondrop="m2(event)" ondragover="event.preventDefault();"
width="336px" height="150px"></div>Explanations
By default source elements are not draggable and the destination element do not accept other elements to drop on it. So need to prevent the default behaviour of the element.
Learning with HTML Online Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.div1 {
width: 372px;
height: 122px;
padding: 10px;
border: 1px solid blue;
}
#p1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid red;
}
</style>
<script>
function m1(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function m2(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h3>Select the red element, drag it to the blue drop area and then release the selection to move the element.</h3>
<div class="div1" ondrop="m2(event)" ondragover="event.preventDefault();" width="336px" height="150px"></div>
<p id="p1" draggable="true" ondragstart="m1(event)">Hello W3context</p>
</body>
</html>Click on the "Try it Now" button to see how it works.
Drag & Drop Operations
During drag operations, several event types are fired. Each drag event type has an associated event handler.
Select the element, drag it to the Drop Area and then release the selection to move the element.
Drag & Drop Events
During drag operations, several event types are fired. Each drag event type has an associated event handler:
| Event | On Event Handler | Fires |
|---|---|---|
| drag | ondrag | When a dragged item (element or text selection) is dragged. |
| dragend | ondragend | When a drag operation ends (such as releasing a mouse button). |
| dragenter | ondragenter | When a dragged item enters a valid drop target. |
| dragleave | ondragleave | When a dragged item leaves a valid drop target. |
| dragover | ondragover | When a dragged item is being dragged over a valid drop target, every few hundred milliseconds. |
| dragstart | ondragstart | When the user starts dragging an item. |
| drop | ondrop | When an item is dropped on a valid drop target. |