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 recomend using Google Chrome.