一、简介
HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了draggable 属性为 true， 可直接拖放， 如果不想拖放这两个元素， 把属性设为 false 即可。
二、拖放事件
拖放事件由不同的元素产生，一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内，这里把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素称为目标对象，不同的对象产生不同的拖放事件。
（1）源对象：
dragstart：源对象开始拖放，开始移动被拖拽元素时触发（主体是被拖拽元素）
drag：源对象拖放过程中，移动被拖拽元素时触发（主体是被拖拽元素）
dragend：源对象拖放结束，整个拖放操作结束时触发（主体是被拖拽元素）
（2）过程对象：
dragenter：源对象开始进入过程对象范围内，被拖拽元素进入目标元素时触发（主体
是目标元素）
dragover：源对象在过程对象范围内移动，被拖拽元素在目标元素内移动时触发（主
体是目标元素）
dragleave：源对象离开过程对象的范围，被拖拽元素离开目标元素时触发（主体是目
标元素）
（3）目标对象：
drop：源对象被拖放到目标对象内，目标元素完全接受被拖拽元素时触发（主体是目
标元素）
三、dataTransfer 对象
在所有拖放事件中提供了一个数据传递对象 dataTransfer，用于在源对象和目标对象间传递数据。它包含了一些方法及属性。包括了 setData()、getData()、clearData()方法来操作拖拽过程中传递的数据，setDragImage(）方法来设置拖拽时鼠标的下面的图片（默认为被拖拽元素），effectAllowed 和 dropEffect 属性来设置拖放效果。
（1）setData(format, data)
设置拖拽事件中传递的数据，format 参数为数据类型
该方法向 dataTransfer 对象中存入数据，接收两个参数，第一个表示要存入数据种类
的字符串，现在支持有以下几种：
①text/plain：文本文字
②text/html：HTML 文字
③text/xml：XML 文字
④text/uri-list：URL 列表，每个 URL 为一行
第二个参数为要存入的数据。例如：
event.dataTransfer.setData(‘text/plain’,’Hello World’);
（2）getData(format)
获拖拽事件中传递的数据，format 参数为数据类型
该方法从 dataTransfer 对象中读取数据，参数为在 setData 中指定的数据种类，例如：
event.dataTransfer.getData(‘text/plain’);
（3）clearData()
清除拖拽事件中传递的数据
该方法清除 dataTransfer 对象中存放的数据，参数可选，为数据种类。若参数为空，
则清空所有种类的数据，例如：
event.dataTransfer.clearData();
（4）setDragImage(element, x, y)
该方法通过用 img 元素来设置拖放图标
其中 element 表示拖拽时鼠标下面的图片，x 表示图标距离鼠标指针的 x 轴方向的偏
移值，y 表示图标距离鼠标指针 y 轴方向的偏移值，例如：
var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
ev.dataTransfer.setDragImage(icon,-10,-10)
},false)（5）files 属性
返回被拖拽的 FileList（文件列表），相当于它是用户拖拽进浏览器的文件列表，是个
FileList 对象，有 length 属性，可 以通过下标访问。
（6）effectAllowed 和 dropEffect
①effectAllowed
设置或获取数据传送操作可应用于该对象的源元素
②dropEffect
设置或获取拖曳操作的类型和要显示的光标类型
详细说明：
effectAllowed 和 dropEffect 最主要的作用是， 用于配置拖拽操作过程中鼠标指针的类型
以便提示用户后续可执行怎样的操作；其次的作用是，控制 drop 事件的触发与否
①dropEffect
作用：用于设置目标元素将执行的操作，若属性值属于 effectAllowed 范围内，则鼠
标指针将显示对应的指针样式，否则则显示禁止的指针样式
取值范围：
copy ：被拖拽元素将被复制到目标元素内，若属于 effectAllowed 范围内时，则鼠
标指针显示复制的样式，否则则显示禁止的指针样式
link ：被拖拽元素将以超链接的形式打开资源，若属于 effectAllowed 范围内时，则
鼠标指针显示超链接的样式，否则则显示禁止的指针样式
move ：被拖拽元素将被移动到目标元素内，若属于 effectAllowed 范围内时，则鼠
标指针显示移动的样式，否则则显示禁止的指针样式
none ：被拖拽元素不能在目标元素上作任何操作，一直显示禁止的指针样式，除了文
本框外其他元素的默认值均为 none
注意：
1. 仅能在 dragover 事件中设置该属性值，其他事件中设置均无效
2. 当显示禁止的指针样式时，将无法触发目标元素的 drop 事件
②effectAllowed
作用：用于设置被拖拽元素可执行的操作。
取值范围：
copy ，限定 dropEffect 的属性值为 copy，否则会鼠标指针为禁止样式
link ，限定 dropEffect 的属性值为 link，否则会鼠标指针为禁止样式
move ，限定 dropEffect 的属性值为 move，否则会鼠标指针为禁止样式
copyLink ，限定 dropEffect 的属性值为 copy 和 link，否则会鼠标指针为禁止样式
copyMove ，限定 dropEffect 的属性值为 copy 和 move，否则会鼠标指针为禁止样式
linkMove ，限定 dropEffect 的属性值为 link 和 move，否则会鼠标指针为禁止样式
all ，允许 dropEffect 的属性值为任意值
none ，鼠标指针一直为禁止样式，不管 dropEffect 的属性值是什么
uninitialized ，没有限定 dropEffect 属性的值，效果和 all 一样。
注意：
1、仅能在 dragstart 事件中设置该属性，其他事件中设置均无效