Java-Scripts.net

Drag and Drop Interface

Modern interactivity. This script demonstrates how to make elements draggable and drop zones interactive using standard HTML5 events.

Drag the image from the left box to the right box.

Copy the Script

<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>

<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img.jpg" draggable="true" ondragstart="drag(event)">

Frequently Asked Questions

No. This script uses the native HTML5 API, which is built into all modern browsers. It is lighter and faster than loading external libraries.

Native HTML5 drag and drop has poor support on some mobile browsers (touch events are different from mouse drag). For full mobile support, you may need a 'polyfill' library.

Yes. The `dataTransfer` object allows you to carry text, URLs, or custom JSON data along with the dragged element.