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

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

本文关键字：图像 原始 保留 另一个 Javascript      更新时间：2023-09-26

例如：

<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仍然在原地？

您可以通过使用 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" />

我将坚持这里显示的示例：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));
}
相关文章：