user3354230 user3354230 - 6 months ago 12
Javascript Question

How to drag image while still leaving original image there?

How can I duplicate the image and drag it while leaving original in same place?



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));
}

#div1 {
width: 350px;
height: 200px;
padding: 10px;
border: 1px solid black;
}
img {
height: 100px;
width: 100px;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://www.hayspost.com/wp-content/uploads/2013/11/Wichita-State-Logo.png" draggable="true" ondragstart="drag(event)">




Answer

i think you want this:

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

it is almost what you did, but you have to clone the image and add the clone not the original!

Comments