Html HTML5 拖拽复制？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13007582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 drag and copy?
提问by robotwasp
I've seen some working code for HTML5 drag and drop but has anyone an example of a drag and copy? I want to drag an element onto a drop element but only copy the element to this location.
我已经看到了一些 HTML5 拖放的工作代码，但有人有拖放的例子吗？我想将一个元素拖到一个放置元素上，但只将该元素复制到这个位置。
回答by Nippey
I will stick to the example shown here: http://www.w3schools.com/html/html5_draganddrop.asp
我将坚持此处显示的示例：http: //www.w3schools.com/html/html5_draganddrop.asp
Assuming we have this document:
假设我们有这个文件：
<!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>
Normal Drag & Drop
正常拖放
Normal drag and drop has such functions assigned to the respective elements:
正常的拖放具有分配给相应元素的功能：
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));
}
Drag & Copy
拖拽复制
Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.
而您必须更改 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);
}
Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true)to getElementById(data).
试试这个页面：http: //www.w3schools.com/html/tryit.asp?
filename =tryhtml5_draganddrop 然后.cloneNode(true)在getElementById(data).
Switch between Copy & Paste
在复制和粘贴之间切换
You could even do things like in file managers: Ctrl-Key switches from moving to copying:
您甚至可以在文件管理器中执行以下操作：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));
}
回答by BeRecursive
If you wanted an example using JQuery I have provided this jsFiddle. Essentially you just need to bind to the drop, dragoverand dropstartevents for the DOM objects. You can then use JQuery's build in clone()method to duplicate the element.
如果你想要一个使用 JQuery 的例子，我已经提供了这个 jsFiddle。本质上，您只需要绑定到drop,dragover和dropstartDOM 对象的事件。然后，您可以使用 JQuery 的内置clone()方法来复制元素。
JQuery also returns it's own events wrapper so you must get the originaleventfrom the JQuery event
JQuery 还返回它自己的事件包装器，因此您必须originalevent从 JQuery 事件中获取
$('#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);
