html5自动复制,HTML5拖放和复制？

我将坚持这里显示的例子：

http://www.w3schools.com/html/html5_draganddrop.asp

假设我们有这个文件：

οndragοver="allowDrop(event)">

οndragstart="drag(event)" width="336" height="69">

正常阻力&下降

正常拖放具有分配给相应元素的功能：

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

}

在Copy&之间切换糊

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

}