原生拖放
一、若要一个元素可以被拖放，首先要为元素添加draggable属性
| true | 可以被拖放 |
| false | 不可以被拖放 |
| auto | 除img或url以外都可以被拖放 |
| 其他值 | 都不可以被拖放 |
注释：在火狐中设置draggable属性无用，但可以再dragstart事件中为dataTransfer对象中添加setData()方法后就可以允许被拖拽。支持draggable的属性的浏览器有IE10+、Firefox 4+、Safari 5+，chrome,Opera 11.5+.
二、拖拽发生过程
被拖拽元素
| dragstart | 按下鼠标键并开始移动鼠标时 |
| drag |
在dragstart事件之后，在元素被拖动期间会持续触发该事件 |
| dragend | 当拖动停止时，会触发dragend事件 |
放置目标元素
| dragenter | 有元素被拖动到放置目标上 |
| dragover |
紧随dragenter发生，在被拖动的元素 还在放置目标范围内移动时，会持续触发该事件 |
| dragleave | 在元素被拖出放置目标时触发 |
| drop | 元素被放到了放置目标中触发 |
注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend
三、自定义放置目标
原因：所有元素默认是不允许放置的，尽管都支持放置目标事件，当拖放元素经过不允许放置的元素时，就会看到一种特殊光标（圆环中有一条反斜线）。
解决方法：把任何元素都变成有效的放置目标，重写dragenter和dragover事件的默认行为.如
function prevent(e){ var e = e || window.event; e.preventDefault(e); } droptarget.dragover = prevent; droptarget.dragenter = prevent;
此时特殊光标会变成允许放置的光标。
注释：firfox 3.5+中，放置事件的默认行为是打开被放到放置目标上的url，为支持FireFox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL.
四、dataTransfer对象
IE5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。
| setData() | 保存值，第一个参数可以是“text/plain"和"text/uri-list" |
| getData() | 获取在setData（）中保存的值。 |
| dropEffect | 属性，知道被拖动的元素能够执行哪种放置行为。搭配effectAllowed属性才有用 |
| effectAllowed | 属性，表示允许拖动元素的哪种dropEffect. |
注意：dataTransfer对象中的数据只能在drop事件处理程序中读取。如果ondrop处理程序中没有读到数据，那就是dataTransfer对象已经被销毁，数据也丢失了。
| dropEffect的值 | 含义 |
| none | 不能把拖动的元素放在这里 |
| move | 应该把拖动的元素移动到放置目标 |
| copy | 应该把拖动的元素复制到放置目标 |
| link | 表示放置目标会打开拖动的元素（但拖动的元素必须是一个连接，有URL） |
| effectAllowed值 | 含义 |
| uninitialized | 没有给被拖动的元素设置任何放置行为 |
| none |
被拖动的元素不能有任何行为 |
| copy | 只允许值为'copy'的dropEffect |
| link | 只允许值为'link'的dropEffect |
| move | 只允许值为'move'的dropEffect |
| copyLink | 只允许值为'copy'和“link”的dropEffect |
| copyMove | 只允许值为'copy'和“move”的dropEffect |
| linkMove | 只允许值为'move'和“link”的dropEffect |
| all | 允许任意的dropEffect |