Drag and drop

Low level drag and drop

by jo_fog

HTML

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1">
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" id="drag1" width="88" height="31"/>
</div>

<div id="div2"></div>

<p id="log">
</p>

CSS

#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
    console.log("allowDrop");
}

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

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

$("div").on("dragover", function(event) { allowDrop(event); });
$("div").on("drop", function(event) { drop(event); });
$("img").on("dragstart", function(ev) { drag(ev); });