Monday, December 1, 2014

Html5 Drag and Drop, simple move

For intro to drag and drop refer to w3schools. The following snippets are from w3schools.
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));
}
<div id="div1"></div>
    <img id="drag1" draggable="true" src="http://projectsuperior.com/dnd/Logo1.png"  ondragstart="drag(event)" width="100" height="100"/>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
To read further ...

No comments:

Post a Comment