我已经看到HTML5拖放的一些工作代码,但有任何人拖拽和复制的例子?我想将一个元素拖到一个drop元素上,但只将元素复制到这个位置。
解决方法
我将坚持这里显示的例子:
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)); }
拖拽复制
而你必须改变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); }
试试这个页面:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
然后将.cloneNode(true)附加到getElementById(data)。
在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)); }