我最近在搞项目时碰到一个问题，要做HTML5的拖拽复制功能。这个跟我们平时用的HTML5拖拽有点不一样。HTML5里的拖拽主要就是把东西从这儿拖到那儿。但这次，我们要做的是拖拽复制，是在拖拽的时候做元素的复制，不是剪切。下面就给大家说说我怎么搞定这个HTML5拖拽复制功能的。
浏览器支持
HTML5的拖拽复制功能现在就有，大家常用的InternetExplorer9,Firefox,Opera12,Chrome,Safari5这些浏览器全都能用！就是说不管你用哪个浏览器，都能享受到这个新功能的方便快捷了~
搞HTML5拖拽复制，关键就是要做一个跟那个正在抓的东西一模一样的角色，还要把它放到想要的地方去。克隆元素有一个很实用的方法，那就是.cloneNode()。这个方法能帮我们轻轻松松搞定元素的克隆，也就有了拖拽复制的乐趣。用上这个方法，我们在拖拽的时候就能随心所欲地复制元素，而且原来的东西还会保持原样~
代码实现
搞定HTML5的拖拽复制功能，其实不难！只要在原本的HTML5拖拽基础上稍加调整，就能轻松搞定。具体操作就是，在拖拽的时候，关注下发生的拖拽事件，在恰当的时刻把要拖拽的东西给克隆出来，然后把这个克隆好的东西放到想要它去的地方。这样一来，拖拽复制的效果就大功告成！
nbsp;html>
#p1 {
width: 700px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag1 {
cursor:pointer;
}
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);
}
请把 Windows Azure 的图片拖放到矩形中：
搞定HTML5的拖拽复制除了关键的克隆元素操作以外，还能根据你自己的需要做点个性化调整。比如说，我们可以给移动过去的元素设置更多好看或有用的样式属性，这样就能满足各种业务需求。所以，HTML5的这个拖拽复制功能真的很实用也很灵活，你想怎么改都行！
总结与展望
这篇文章给你们介绍了HTML5拖拽复制功能的用处和怎么实现。其实这不只是为了让用户感觉好点，还能拓展我们的业务逻辑。希望对你们有帮助，以后遇到这种情况就能灵活地运用~
最后想问问大家，实际项目里头，你们有没有遇上什么好玩儿或是挺刺激的HTML5拖拽情况？快来跟我们分享下呗！
评论0