HTML5 drag属性

HTML5 drag属性

想要对某个元素拖拽，需要首先给元素加上draggable=“true”，默认a标签和img是可以拖动的。

1. 拖动事件

事件分为两类：一被拖动的元素上的事件，二被放置的位置接收到的事件。

一、发生在被拖动的元素上的事件

事件名	触发时机	触发次数
dragstart	当拖动开始时（按下鼠标键并开始移动）触发一次	1
drag	拖动开始后触发，在元素拖动期间会持续触发	n
dragend	拖动结束（释放鼠标、无论放置目标是否有效）后触发一次	1

二、发生在放置目标元素上的事件

事件名	触发时机	触发次数
dragenter	当拖动元素进入目标时触发	1
dragover	当拖动元素在目标元素范围内移动时持续触发	n
dragleave或drop	元素拖出了放置目标，则dragover事件不再发生，触发dragleave事件；如果拖动元素放到了目标元素上，则触发drop事件	1

注意

1. drag和dragover是持续触发的。拖放文件到浏览器中时，需要在dragover和drop事件处理器中阻止默认行为（preventDefault()）。因为从其他应用软件或是文件中拖东西进入浏览器中，默认的行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上。
2. 在被拖元素上触发dragstart事件后，则该元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了。

2. dataTransfer对象

dataTransfer对象是拖放事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。

在拖动元素时可以设置传递的信息
event.dataTransfer.setData(“te”, “sss);两个参数，第一个参数key，第二个参数value。注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。

2.1 dataTransfer对象的方法

方法	说明
clearData(format)	清除以特定格式保存的数据
getData(format)	从dataTransfer对象中读取指定类型的值
setData(format,data)	为dataTransfer对象指定特定格式的数据，这些数据只能在ondrop处理程序中读取
setDragImage(element,x,y)	指定一个元素拖动发生时显示在光标下方，三个参数分别是要显示的HTML元素和光标在显示元素中的x，y坐标
addElement(element)	为拖动操作添加一个元素（即增加作为拖动源而相应的回调对象）。如果想要让某个元素跟随被拖动元素一同被拖拽，可使用该方法

2.2 dataTransfer对象的属性

属性	说明
dropEffect	获取或设置被拖动元素能够执行哪中放置行为，不同的行为显示相应的光标
effectAllowed	表示允许拖动元素的哪种 dropEffect。
files	返回被拖放文件的FileList对象
types	返回ondragstart事件中传递的数据类型的类似数组的集合

dropEffect的属性值有：

1. move：应该把元素移动到放置目标
2. copy：应该把拖动元素复制到放置目标
3. link：应该在放置目标上打开拖动元素（拖动元素必须是有 URL 的链接）
4. none：不能放置拖动元素（除文本框以外所有元素的默认值）

effectAllowed的属性值分别有：

1. uninitialized：被拖动元素没有设置放置行为
2. none：被拖动元素不允许有任何行为
3. copy：只允许 copy 值的 dropEffect
4. move：只允许 move 值的 dropEffect
5. copeLink：copy 和 link 值的 dropEffect
6. copeMove：copy 和 move 值的 dropEffect
7. linkMove：link 和 move 值的 dropEffect
8. all：允许任意 dropEffect

注意使用dropEffect属性时必须在ondragenter中针对放置目标设置，只有搭配effectAllowed属性时才有用。必须在ondragstart中设置 effectAllowed。