html5拖放复制,HTML5拖放和复制？(HTML5 drag and copy?)

我会坚持在这里所示的例子： 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));

}

拖放和复制

而你必须改变下降的功能，使其复制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键开关：你甚至可以做这样的事情在文件管理器：

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

}