我已经看到一些HTML5拖放的工作代码,但有任何人的拖放和复制的例子?我想将元素拖到拖放元素上,但只将元素复制到此位置。HTML5拖放和复制?
回答
我会坚持在这里所示的例子: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));
}
如果您使用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
- 1. JQuery和KineticJS HTML5绘制和拖放
- 2. HTML5画布绘制拖放
- 3. HTML5拖放或JqueryUI拖放?
- 4. 可可WebView和HTML5拖放
- 5. Html5拖放 - 复制文本放置位置
- 6. 在线拖动和拖放HTML5 IDE
- 7. HTML5拖放
- 8. HTML5拖放setDragImage
- 9. HTML5拖放
- 10. HTML5拖放,Asp.Net
- 11. HTML5拖放dropzone
- 12. 拖放API HTML5
- 13. *可恢复* html5拖放文件上传
- 14. wx.TreeCtrl拖放,复制和移动
- 15. WPF DataGrid的“拖放和复制”
- 16. html5 - 拖放 - 不触发拖放事件
- 17. HTML5拖放n拖放文件上传
- 18. HTML5拖放与jQuery UI拖放
- 19. Html5画布拖放可拖放字段
- 20. HTML5拖放输入
- 21. html5拖放持久
- 22. HTML5拖放 - 地图
- 23. HTML5拖放问题
- 24. HTML5拖放“填空”
- 25. 使用HTML5拖放
- 26. HTML5拖放测验
- 27. HTML5拖放节点
- 28. HTML5拖放行为
- 29. HTML5拖放问题
- 30. HTML5拖放形式
的下降动作完全取决于你的
originalevent
。如果你想要它做一个“复制”,那就这样做。 – Oded