Question

我看过HTML5拖放的一些工作代码但是有没有人拖拽和复制的例子？我想将元素拖到drop元素上，但只将元素复制到此位置。

Answer 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>

正常阻力＆amp;降

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

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

拖动＆amp;复制

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

在Copy＆amp;粘贴

你甚至可以在文件管理器中执行操作：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)); }

Answer 2

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

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

HTML5拖放和复制？

2 个答案: