html5之拖拽API

摘要: 主要介绍拖拽API

实现方式

html5的实现方式：将想要拖放的对象元素的draggable属性设置为true(img元素和a标签(指定href)默认是允许拖拽的)

html4的实现方式：通过mousedown,mousemove,mouseup实现拖放操作。

拖放的相关事件

dragstart 开始拖放操作

drag 拖放过程中

dragenter 被拖放的对象进入到本元素的范围内

dragover 被拖放的对象在本元素中移动

dragleave 被拖放的元素离开了本元素的范围

drop 有其他元素被拖放到本元素中

dragend 拖放操作结束

DataTransfer对象的属性和方法

属性

dropEffect : 表示拖放操作的视觉效果，允许对其进行值得设定，该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许值为none、copy、link、move

effectAllowed : 用来指定当前元素被拖拽的时候允许的视觉效果，可以指定的效果：none,copy,copyLink,copyMove,link,linkMove,move,all,unintialize

type : 存入数据的种类，字符串的伪数组。

方法

void clearData(DOMString format) 清除掉DataTransfer对象中存放的数据，如果省略参数format,则清除全部数据

void setData(DOMString format, DOMString data) 向DataTransfer对象中存入数据

DOMString getData(DOMString format) 读取数据

void setDragImage(Element image, long x, long y) 用image元素设置拖放图标