html5自動複制,HTML5拖放和複制？

我将堅持這裡顯示的例子：

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

假設我們有這個檔案：

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

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

正常阻力&下降

正常拖放具有配置設定給相應元素的功能：

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text/html",ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("text/html");

ev.target.appendChild(document.getElementById(data));

}

拖拽複制

而你必須改變drop函數，以便它複制DOM元素而不是移動它。

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("text/html");

var nodeCopy = document.getElementById(data).cloneNode(true);

nodeCopy.id = "newId";

ev.target.appendChild(nodeCopy);

}

在Copy&之間切換糊

您甚至可以在檔案管理器中執行操作：Ctrl-Key從移動到複制切換：

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("text/html");

if (ev.ctrlKey)

{

var nodeCopy = document.getElementById(data).cloneNode(true);

nodeCopy.id = "newId";

ev.target.appendChild(nodeCopy);

}

else

ev.target.appendChild(document.getElementById(data));

}