Skip to content

Instantly share code, notes, and snippets.

@davamix

davamix/DragAndDrop.html

Created April 4, 2020 03:02
Show Gist options
  • Save davamix/3776b433759e68194a9f193e1c00e1c4 to your computer and use it in GitHub Desktop.
Save davamix/3776b433759e68194a9f193e1c00e1c4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DragAndDrop.html
<!DOCTYPE html>
<!-- https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API -->
<html>
<!-- The body has height of 300px of effective area to drop the elements -->
<body id="body" ondrop="drop_handler(event)" ondragover="dragover_handler(event)" style="height: 300px;">
<div id="div1" draggable="true" ondragstart="dragstart_handler(event)" ondrop="drop_handler(event)" ondragover="dragover_handler(event)" style="background-color: gold; padding: 10px;">Draggable item A</div>
<div id="div2" draggable="true" ondragstart="dragstart_handler(event)" ondrop="drop_handler(event)" ondragover="dragover_handler(event)" style="background-color: deepskyblue; padding: 10px;">Draggable item B</div>
</body>
<script>
function dragstart_handler(ev){
ev.dataTransfer.setData("application/my-app", ev.target.id);
ev.dataTransfer.dropEffect = "move";
console.log("Dragging " + ev.target.id);
}
function dragover_handler(ev){
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev){
ev.preventDefault();
const data = ev.dataTransfer.getData("application/my-app");
ev.target.appendChild(document.getElementById(data));
console.log("Dropping on " + ev.target.id);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment