HTML5拖放和复制？ [英] HTML5 drag and copy?
问题描述
我已经看到了一些HTML5拖放的工作代码，但有没有人有一个拖放和复制的例子？我想将一个元素拖到一个drop元素上，但只将元素复制到这个位置。
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.
推荐答案
我会坚持这个例子此处显示： http://www.w3schools.com/html/html5_draganddrop.asp
I will stick to the example shown here: 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 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));
}
拖动&复制
尽管您必须更改drop函数，以便它复制DOM元素而不是移动它。
Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.
/* 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
And然后将 .cloneNode（true）附加到 getElementById（数据）。
Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).
在复制和放大之间切换粘贴
您甚至可以在文件管理器中执行下列操作：Ctrl-Key从移动到复制：
You could even do things like in file managers: Ctrl-Key switches from moving to copying:
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));
}
这篇关于HTML5拖放和复制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
