HTML Drag and Drop

It is a powerful user interface concept which is used to copy, reorder and delete items. You can hold the mouse button down over an element and drag it to another location.

Events for Drag and Drop feature:-

Drag:- It fires every time when the mouse is moved while the object is being dragged.
Dragstart:- It is a very initial stage. It fires when the user starts dragging object.
Dragenter:- It fires when the user moves his/her mouse cursur over the target element.
Dragover:- This event is fired when the mouse moves over an element.
Dragleave:- This event is fired when the mouse leaves an element.
Drop :- Drop It fires at the end of the drag operation.
Dragend:- It fires when user releases the mouse button to complete the drag operation.

Syntax:-

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Example:-

<!DOCTYPE html>
 <html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

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

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

<p>Drag the elibrary portal image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo/elibrary.png" draggable="true" 
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Test it Now

Next TopicHTML google

← prev next →

HTML Tutorials

HTML Tags

HTML5 Tutorial

HTML Drag and Drop

Events for Drag and Drop feature:-