html - Javascript - Keep the original image after dropping it in another container

For example:

<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  function drop(ev) {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />

I want to drag the x.png file and drop it into the div, but x.png will move into the div if I do so. How can I achieve that, after I drag and drop, the div gets a x.png, and the original x.png is still where it was?

For example:

<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  function drop(ev) {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />

Share Improve this question edited Nov 5, 2013 at 7:04 Rohit 5,7214 gold badges33 silver badges61 bronze badges asked Nov 5, 2013 at 6:26 LFSQLANS 211 silver badge4 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 10

You can do that by duplicating the required DOM element by using cloneNode(true) method

<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
 }
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" 
    ondragstart="drag(event)" width="75" height="75" />

I will stick to the example shown here: http://www.w3schools./html/html5_draganddrop.asp

Assuming we have this document:

<!DOCTYPE HTML>
<html>
 <head>
  <script>
    <!-- script es in the text below -->
  </script>
 </head>
 <body>

  <div id="div1" ondrop="drop(event)"
  ondragover="allowDrop(event)"></div>

  <img id="drag1" src="img_logo.gif" draggable="true"
  ondragstart="drag(event)" width="336" height="69">

 </body>
</html>

Normal Drag & Drop

Normal drag and drop has such functions assigned to the respective elements:

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

Drag & Copy

Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.

//other functions stay the same

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

Try this page: http://www.w3schools./html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).

You could even do things like in file managers: Ctrl-Key switches from moving to copying:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript - Keep the original image after dropping it in another container - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)