html5的拖拽事件

原生拖放

一、若要一个元素可以被拖放，首先要为元素添加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