2

例如：

<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 得到 a x.png，而原来x.png的仍然是它原来的位置？

4

2 回答 2

10

您可以通过使用 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" />
于 2013-11-05T06:44:44.613 回答
4

我会坚持这里显示的例子：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>

普通拖放

普通拖放具有分配给各个元素的此类功能：

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

拖动和复制

而您必须更改 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));
}
于 2013-11-05T06:56:14.713 回答