HTML drag and drop

HTML 5 supports drag and drop feature which allows users to drag an element and drop it on another location.

Creating a drag and drop

To make an element draggable, you should first set the draggable attribute.

<button id="dragbtn" draggable="true" ondragstart="dragStart(event)">Drag Me</button>

Specify a global ondragstart() event handler.

<script>
function dragStart(ev) 
{
    ev.dataTransfer.setData("text", ev.target.id);
}
</script>

Create a drop zone and ondrop() event handler.

<script>
function dragEnd(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="dropzone" ondrop="dragEnd(event)" ondragover="dragOver(event)" style="height:100px; border:1px solid red;"></div>

Create an ondragover() event handler.

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

Complete code

<!DOCTYPE html>
<html>
<head>
<script>
function dragOver(ev) {
    ev.preventDefault();
}

function dragStart(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function dragEnd(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="dropzone" ondrop="dragEnd(event)" ondragover="dragOver(event)" style="height:100px; border:1px solid red;"></div>

<button id="dragbtn" draggable="true" ondragstart="dragStart(event)">Drag Me</button>

</body>
</html>

Output

Note: Drag and drop feature is not supported by all browsers. I recommend using Google Chrome.

HTML drag and drop

Creating a drag and drop

Complete code

Output

Subscribe

You might also like