拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖拽是标准的一部分，任何元素都能够拖拽。 Html5拖拽非常常见的一个功能，但是大部分拖拽的案例都是一个剪切的过程， 项目中需要实现Html5拖拽复制的功能，Html5拖拽复制很简单，只需要在普通Html5拖拽的过程中做一点小小的改动即可。
ps: 本篇博文为非首页文章,只是简单的笔记。
浏览器支持
Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5
\
v1.0代码部分
\
<!DOCTYPE html>
<html>
<head>
<styletype= "text/css" >
#div1 {
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>
<divid= "div1" ondrop= "drop(event)" ondragover= "allowDrop(event)" ></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<imgid= "drag1" src= "www.cnblogs.com/images/cnbl…" draggable= "true" ondragstart= "drag(event)" />
</body>
</html>
\
代码解析
实现思路就是克隆被拖拽的元素，然后把克隆元素appendChild()到指定位置
实现Html5拖拽复制的核心代码.cloneNode()
Html5拖拽复制完成以后，其实还有很多事情可以在appendChild()执行以后完成，这个看具体需求吧
如果只是想实现传统的HTML5拖拽的话，移除var item = document.getElementById(data).cloneNode();，然后ev.target.appendChild(data);即可
作 者：请叫我头头哥
出 处：www.cnblogs.com/toutou/
关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】 一下。您的鼓励是作者坚持原创和持续写作的最大动力！\
