HTML5拖放和复制？

问题描述：

我已经看到一些HTML5拖放的工作代码，但有任何人的拖放和复制的例子？我想将元素拖到拖放元素上，但只将元素复制到此位置。HTML5拖放和复制？

的下降动作完全取决于你的originalevent。如果你想要它做一个“复制”，那就这样做。 – Oded

答

我会坚持在这里所示的例子：http://www.w3schools.com/html/html5_draganddrop.asp

假设我们有这样的文件：

<!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>

正常拖动&降

正常拖放具有这样的功能分配给各个元素：

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

非常感谢Nippey--它确实在HTML5中起作用！ – robotwasp

ev.ctrlKey是我正在寻找的！ – JohnnyLambada

+1帮助我今天:) –

答

如果您使用JQuery我想一个例子提供this jsFiddle。基本上，您只需绑定到DOM对象的drop，dragover和dropstart事件。然后你可以用clone()方法中的JQuery构建来复制元素。

的JQuery也返回它自己的事件封装器，所以你必须从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);

嘿谢谢BeRecursive - 这完全可以工作！我曾希望使用HTML5本地拖放功能。 – robotwasp

这些应该绑定到HTML5 Javascript事件，这不是使用JQueryUI的“可拖动”接口。 – BeRecursive

HTML5拖放和复制？

相关推荐