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

Question

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

例如:

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

Run Code Online (Sandbox Code Playgroud)

我想拖动x.png文件并将其放入div中,但x.png如果我这样做,它将移动到div中.我怎么能实现这一点,在我拖放之后,div得到了一个x.png,而原始版本x.png仍然在哪里？

Answer 1

tkr*_*_in 7

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ama*_*anS 5

我将坚持此处显示的示例：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>

Run Code Online (Sandbox Code Playgroud)

正常拖放

正常的拖放具有分配给各个元素的功能：

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

Run Code Online (Sandbox Code Playgroud)

拖动和复制

然而您必须更改 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));
}

Run Code Online (Sandbox Code Playgroud)

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

您甚至可以在文件管理器中执行类似的操作：Ctrl 键从移动切换到复制：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，7 月前
查看次数：	2540 次
最近记录：	12 年，7 月前