点击上方“Html5跨平台开发”按钮关注，更多HtmldivcssHTML5+CSS3、JavaScript、JQuery、PHP、mysql、帝国CMS建站教程触手可及。
先上demo，尝试使用chrome，代码可以参考Github。
在HTML5出现之前，页面元素的拖放需要监听mousedown、mouseover、mouseup等一系列扰动，然后改变元素的相对位置才能达到这种效果。 HTMLDnD（拖放）API 的出现使得拖放变得更加容易。 而且由于DnD还处于草案阶段，不同的浏览器还没有统一其规范，一些干扰在不同的浏览器中会产生不同的影响。
使用DnD需要明确两件事，一是需要拖动的元素，二是被拖动的元素可以放置的位置。 拖放只不过是将元素从一个位置拖到另一个位置。
拖
首先，我们需要指定要拖动的元素。 设置方法非常简单。 为DOM元素设置draggable属性，并将属性值设置为true。 像这样的东西：
其实上面的代码是多余的，页面中的图片（img）、链接（带有href的标签）和文字默认都是可拖动的。 为了统一，最好加上draggable属性。
Draggable 属性也有两个值，分别是 false 和 auto。 顾名思义，false是设置不可拖动，auto是浏览器的默认值。
当我们左键单击（按下）可拖动的DOM元素并轻连接它时，就会触发ondragstart风暴，并且风暴只会触发一次。 一般我们会在ondragstartstorm中记录被拖拽的元素信息（ondrop时很容易处理）。 例如demo中记录了被拖动元素的id：
for(vari=lis.length;i--;){
lis[i].ondragstart = 函数(e){
e.dataTransfer.setData('id',e.target.id);
};
ondragstart风暴触发后，ondrag风暴仍然会被触发，直到拖拽风暴结束。
降低
其次，我们需要明确被拖动的元素可以放置在哪里，ondragover规则指定了被拖动的数据放置在哪里。
默认情况下，元素不能放置在其他元素中。 如果我们需要设置允许的放置，我们必须禁用元素的默认处理方法：
vardus=document.querySelector('.dustbin');
dus.ondragover=函数(e){
e.preventDefault();
};
当一个元素被拖到另一个元素上时，就会触发前面的ondrop事件。 如果需要正确触发ondrop事件，需要取消DnD事件的一些默认行为：
10
dus.ondrop=函数(e){
//调用preventDefault()阻止浏览器对数据的默认处理（dropstorm的默认行为是作为链接打开）
e.preventDefault();
e.stopPropagation();//兼容ff
varid=e.dataTransfer.getData('id')
,node=document.getElementById(id);
节点.parentNode.removeChild(节点);
};
有文档说应该取消ondraenter()的默认行为，但是楼主在实际操作中并没有意识到这一点。
风暴
DnD中的三大风暴里面已经提到过，dragstart、dragover、drop。 虽然DnD中还有好几场风暴，但它们发生的顺序是：
Dragstart（拖放元素）->drag（拖放元素）->dragenter（拖放元素）->dragover（拖放元素）->dragleave（拖放元素）->drop（拖放元素）->dragend（拖放元素）
不难理解，ondragstart 风暴是在拖动风暴开始时触发的，ondraggenter 风暴是在被拖动的元素步入可放置元素时触发的（ondraggenter 在两个元素相交时不会触发，但拖放的元素是在目标元素连接联通一段时间后触发），然后会持续触发ondragover风暴（参考mouseover）。 当键盘和拖放的元素恰好位于可放置元素上时，会触发 ondrop 事件。 当拖动事件结束时，无论拖动操作是否成功，都会触发ondragend（对应ondragstart）事件。
数据传输
在拖动过程中，bounce函数接受的wave参数有一个dataTransfer属性。 它指向一个包含与拖动相关的各种信息的对象。
dataTransfer 对象有两个主要方法：getData() 和 setData()。 需要注意的是，这两种方法仅适用于拖曳扰动和跌落扰动。 不难想象，getData()可以获取setData()保存的值。 setData()方法的第一个参数，也是getData()方法的唯一参数，是一个字符串，表示要保存的数据类型，值为'text'或'URL'。 IE 只定义了两种有效的数据类型“text”和“URL”html返回顶部，而 HTML5 对此进行了扩展以允许指定各种 MIME 类型。
当拖动文本框中的文本时，浏览器会手动调用setData()方法，将拖动的文本以'text'格式保存在dataTransfer对象中。 同样，当拖动链接或图像时，它会手动调用setData()来保存URL信息。 如果有必要，您可以使用 getData() 来读取浏览器在 Drop Storm 期间保存的值。
然而，这实际上是没有用的。 在实际开发中，我们大多数人还是对DOM进行操作，所以大多数情况下我们在dragstartstormhandler中调用setData()，手动保存我们想要传输的数据，然后在dropstorm中读取，有点像jQuery的data风暴。
dropEffect和effectAllowed
dropEffect和effectAllowed是上面提到的dataTransfer对象的两个属性，有什么用呢？ 简单来说有两个好处，一是设置元素拖拽时的键盘样式，二是设置元素是否可以放置。
这里我测试了三个浏览器，chrome、ff和uc，chrome和uc的表现类似。
通常我们将元素移出其原始位置，键盘手势将使其“免提”，直到元素被拖到可放置区域。
然而，ff 却并非如此。 在ff中，元素在拖动过程中不会显示“禁止之手”。
将元素拖到可放置区域时，默认键盘手势如下。
虽然通过设置dropEffect和effectAllowed总共可以设置三种键盘手势（move、copy、link），但是如下（move实际上和默认的一样）：
需要在ondragstart方法中设置effectAllowed，在ondragover方法中设置dropEffect。 详细内容请参考demo代码。
我们还可以设置dropEffect和effectAllowed的值，让一个drop元素只能包含移动元素，或者复制元素等，具体可以阅读这篇文章html返回顶部，HTML5魔法殿堂：全面了解Drag&DropAPI，其中非常好。 您也可以参考第 484 页了解该值。
其实你需要知道的是，DnD不会帮你完成任何复制或移动的操作，而是要求用户在DnD过程中记录下需要操作的对象信息，然后完成复制或移动的操作。移动中的掉落风暴。
技巧
在实践过程中还发现一些问题。
在ff中打开demo，将图片拖到空白处，手动在新标签页打开图片。 虽然我已经在各种干扰中添加了preventDefault()，但我不知道原因。
如果一个可拖动元素最初位于可放置元素内，则先将该元素拖出然后再放回去会触发 ondrop 风暴，但 e.target 是被拖放的元素。 如果放置在另一个元素上，目标将指向放置的元素，而不是拖放的元素。 这可以通过确定目标元素来解决。 关于这一点，你可以看一下w3cschool的demo。 打开控制台，将图片拖出，然后再拖回来。 控制台将复制错误。 事实上，代码并没有考虑到这一点。
