CodesJava

Easy learning with example program codes

HTML Drag and Drop

HTML Drag and Drop

HTML Drag and Drop (DnD) is a powerful user interface concept. To copy, reorder and delete items the HTML Drag and Drop is used. With the help of a mouse, we can drag an element to another location and can drop the element at the desired location by releasing the mouse button. In traditional HTML4, complex JavaScript programming or other JavaScript frameworks like jQuery were used to achieve the Drag and Drop functionality.

Events for Drag and Drop feature:

EventUses
DragUsed to trigger when mouse moves while dragging the object.
DragstartUsed to trigger when dragging object starts.
DragenterUsed to trigger when the mouse cursor moves over the target element.
DragoverUsed to trigger when the mouse cursor moves over an element.
DragleaveUsed to trigger when the mouse cursor leaves an element.
DropUsed to trigger when the drag operation ends.
DragendUsed to trigger when the mouse button is released to complete the drag operation.

Example:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 300px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
}
</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 image to the rectangle:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="preload.gif" draggable="true" ondragstart="drag(event)" width="200" height="80">
 
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we have used the ondrop and ondragover events on div element, and ondragstart event on img tag. To see the effect drag the image to the rectangle.

Stages during Drag and Drop operations:

Make an element draggable:

Set the draggable attribute to “true” on the element, to make an element draggable.

Example:

<img draggable = “true”>

What to drag:

Use ondragstart() and setData() methods, to indicate what should happen when an element is dragged.

Where to Drop:

Use ondragover() event, to indicate where to drop an element after dragging.

Do the Drop:

Use ondrop() event to drop an element.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status