Sunny Books
What we have

HTML5 drag and drop

Drag and drop is a part of the HTML5 standard. we can "grab" an object and drag it to a different location.

Drag an image into a box

<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="img1" src="logo.png" draggable="true" ondragstart="drag(event)" width="320" height="40">
<script>
function allowDrop2(e){e.preventDefault();}
function drag2(e){
    e.dataTransfer.setData("Text",e.target.id);
}
function drop2(e){
    e.preventDefault();
    var data=e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
}
</script>

Drag image back and forth

<div id="box2" ondrop="drop2(event)" ondragover="allowDrop2(event)">
    <img id="img2" logo.png" draggable="true" ondragstart="drag2(event)" width="320" height="40">
</div>
<div id="box3" ondrop="drop2(event)" ondragover="allowDrop2(event)"></div>
<script>
function allowDrop2(e){e.preventDefault();}
function drag2(e){
    e.dataTransfer.setData("Text",e.target.id);
}
function drop2(e){
    e.preventDefault();
    var data=e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
}
</script>

SUNWEB EXPERT