HTML5拖放行为——DataTransfer对象

	
可将你喜欢的项目拖进收藏夹
	
项目1
	
项目2
	
项目3
	
项目4
	
项目5


	
收藏夹

 
垃圾桶

在HTML 5 中img元素默认是可拖动的；而a元素只要设置了href属性，它默认也是可拖动的。

对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable属性设为true即可。但设置该属性只表示该元素可拖动，拖动过程中未携带数据，因此用户看不到效果。为了让拖动操作携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

document对象默认阻止拖动事件，所以被拖动元素到“目的地”时不被接受。为了让document可以接受“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件默认行为。

拖放操作的相关事件有：

• ondragstart：被拖放的HTML元素开始拖动时触发该事件。
• ondrag：被拖放的HTML元素在拖放过程中不断触发该事件。
• ondragend：被拖放的HTML元素拖放结束时触发该事件。
• ondragenter：拖放时鼠标经过的元素在被拖放元素进入本元素的范围时触发该事件。
• ondragover：拖放时鼠标经过的元素在被拖放元素进入本元素的范围拖动时不断触发该事件。
• ondragleave：拖放时鼠标经过的元素离开本元素时触发该事件。
• ondrop：拖放时鼠标经过的元素在其他元素被放到本元素时触发该事件。

DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法：

• dataTransfer.dropEffect：设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许none、copy、link、move值之一。

• dataTransfer.effectAllowed：设置或返回被拖动元素允许发生的拖动行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。

• dataTransfer.items：该属性返回DataTransferItems对象，该对象代表了拖动数据。

• dataTransfer.setDragImage(element x,y)：设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离。

• dataTransfer.addElement(element)：添加自定义图标。

• dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

• dataTransfer.getData(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。

• dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据。