HTML5 拖放复制？答案

【问题标题】：HTML5 drag and copy?HTML5 拖放复制？
【发布时间】：2012-10-22 08:33:24
【问题描述】：

我已经看到了一些 HTML5 拖放的工作代码，但有谁有拖放的例子吗？我想将一个元素拖到一个放置元素上，但只将该元素复制到该位置。

【问题讨论】：

标签： html

【解决方案1】：

我将继续使用此处显示的示例：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) {
  /* The default handling is to not allow dropping elements. */
  /* Here we allow it by preventing the default behaviour. */
  ev.preventDefault();
}

function drag(ev) {
  /* Here is specified what should be dragged. */
  /* This data will be dropped at the place where the mouse button is released */
  /* Here, we want to drag the element itself, so we set it's ID. */
  ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
  /* The default handling is not to process a drop action and hand it to the next 
     higher html element in your DOM. */
  /* Here, we prevent the default behaviour in order to process the event within 
     this handler and to stop further propagation of the event. */
  ev.preventDefault();
  /* In the drag event, we set the *variable* (it is not a variable name but a 
     format, please check the reference!) "text/html", now we read it out */
  var data=ev.dataTransfer.getData("text/html");
  /* As we put the ID of the source element into this variable, we can now use 
     this ID to manipulate the dragged element as we wish. */
  /* Let's just move it through the DOM and append it here */
  ev.target.appendChild(document.getElementById(data));
}

拖放复制

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

/* other functions stay the same */

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("text/html");
  /* If you use DOM manipulation functions, their default behaviour it not to 
     copy but to alter and move elements. By appending a ".cloneNode(true)", 
     you will not move the original element, but create a copy. */
  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "newId"; /* We cannot use the same ID */
  ev.target.appendChild(nodeCopy);
}

试试这个页面：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/html");
  /* Within a Mouse event you can even check the status of some Keyboard-Buttons
     such as CTRL, ALT, SHIFT. */
  if (ev.ctrlKey)
  {
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = "newId"; /* We cannot use the same ID */
    ev.target.appendChild(nodeCopy);
  }
  else
    ev.target.appendChild(document.getElementById(data));
}

【讨论】：

感谢 Nippey - 很高兴看到这在 HTML5 中确实有效！
ev.ctrlKey 是我要找的！
不要忘记在创建的副本中更改id。

【解决方案2】：

如果您想要一个使用 JQuery 的示例，我提供了 this jsFiddle。本质上，您只需要绑定到 DOM 对象的 drop、dragover 和 dropstart 事件。然后，您可以使用 JQuery 的内置 clone() 方法来复制元素。

JQuery 还返回它自己的事件包装器，因此您必须从 JQuery 事件中获取 originalevent

$('#x').bind('dragstart', function(e) {
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
    e.originalEvent.dataTransfer.setData('Text', '#x');
});

$('#drop-box').bind('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());

    return false;
}).bind('dragover', false);

【讨论】：

嘿，谢谢 BeRecursive - 这完全可行！我希望使用 HTML5 原生的拖放功能。
这些应该绑定到 HTML5 Javascript 事件，这不是使用 JQueryUI 的draggable 接口。