CODEWITHSUNDEEP
javascriptjqueryhtml
Prakash_se7en
Prakash_se7en

Reputation: 88

Jquery drag and drop an image but orginal/source image is lost

Image in image tray should be in the tray even if it is dragged and dropped in either first/second div .But it gets disappeared once i place it in either first/second div. i want the image to be present in tray even if it is dragged . could someone pls help?

Firtst input div<div class="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

second input div<div class="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Image tray<img id="drag1" src="https://www.google.com/images/srpr/logo3w.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

Javascript

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

Please find the my work @ JSFIDDLE

Upvotes: 0

Views: 49

Answers (1)

artm
artm

Reputation: 8584

You can clone the element, see https://jsfiddle.net/bgwzvoj1/1/

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    ev.target.appendChild(document.getElementById(data).cloneNode());
}

cloneNode

Upvotes: 1

Related Questions