Question

例如：

<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" />

我想拖动x.png文件并将其放入div中，但如果我这样做，x.png将移入div。我如何实现这一点，拖放后，div得到x.png，而原来的x.png仍然在原来的位置？

Answer 1

您可以通过使用cloneNode（true）方法

复制所需的DOM元素来实现

<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" />

Answer 2

我将坚持这里显示的例子：http://www.w3schools.com/html/html5_draganddrop.asp

假设我们有这个文件：

<!DOCTYPE HTML>
<html>
 <head>
  <script>
    <!-- script comes 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>

正常阻力＆amp;降

正常拖放将这些功能分配给相应的元素：

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

拖动＆amp;复制

然而，您必须更改drop函数，以便复制DOM元素而不是移动它。

//other functions stay the same function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data).cloneNode(true)); }

试试此页：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
然后将.cloneNode(true)附加到getElementById(data)。

你甚至可以在文件管理器中执行操作：Ctrl-Key切换到移动到复制：

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

Javascript - 将原始图像放入另一个容器后保留

2 个答案: