ps: 本篇博文为非首页文章,只是简单的笔记。
浏览器支持
internet explorer 9
firefox
opera 12
chrome
safari 5
v1.0代码部分
<!doctype html> <html> <head> <styletype="text/css"> #p1 { width: 700px; height: 120px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { cursor:pointer; } </style> <scripttype="text/javascript"> function allowdrop(ev) { ev.preventdefault(); } function drag(ev) { ev.datatransfer.setdata(text, ev.target.id); } function drop(ev) { ev.preventdefault(); var data = ev.datatransfer.getdata(text); var item = document.getelementbyid(data).clonenode(); ev.target.appendchild(item); } </script> </head> <body> <p>请把 windows azure 的图片拖放到矩形中：</p> <pid="p1" ondrop="drop(event)" ondragover="allowdrop(event)"></p> <br/> <br/> <br/> <br/> <br/> <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_azure.png" draggable="true" ondragstart="drag(event)"/> </body> </html>
代码解析
实现思路就是克隆被拖拽的元素，然后把克隆元素appendchild()到指定位置
实现html5拖拽复制的核心代码.clonenode()
html5拖拽复制完成以后，其实还有很多事情可以在appendchild()执行以后完成，这个看具体需求吧
如果只是想实现传统的html5拖拽的话，移除var item = document.getelementbyid(data).clonenode();，然后ev.target.appendchild(data);即可
通过此文，希望能帮助到大家，谢谢大家对本站的支持！
更多html5 拖拽复制功能的实现。