html5文件拖放
api简介:事件:
dragstart:当拖放开始时,源元素就会触发这个事件
drag:在拖动过程中,源元素就会触发这个事件
dragend:当拖动结束时包括投放操作成功或拖动操作取消时,源元素就会触发这个事件
dragenter:当鼠标进入元素所占用的区域时,目标元素就会触发这个事件,一定要使用reventDefault()方法取消这个事件。
dragover:当鼠标指针移动到元素之上时,就会触发这个事件,一定要使用reventDefault()方法来取消这个事件。
drop:当源元素投放到目标元素时,目标元素就会触发这个事件,一定要使用reventDefault()方法来取消这个事件
dragleave:当鼠标指针离开元素所占用的区域时,目标元素就会触发这个事件。
方法:
setData(type,data)当dragstart事件触发时,可以使用这个方法准备需要发送的数据。type属性可以指定任意常规类型(如text/plain或text/html)或自定义类型
getData(type)这个方法返回指定类型的数据,当投放事件触发时,就会调用这个方法。
clearData(type)这个方法可以删除这顶类型的数据。
setDragImage(element,x,y):这个方法可以讲浏览器穿件的默认缩略图替换为之定义图像,并且将其位置设置为鼠标指针所在的位置。
属性:
dataTransfer对象保存拖放操作所传输的数据,其中也引入了一些有用的属性;
types:这个属性返回一个数组,其中包含dragstart事件中所设置的全部类型
files:这个属性返回一个数组,其中包含拖放文件的信息。
dropEffect:这个属性返回当前选择的操作类型。设置这个属性,就可以修改选择的操作。它支持的值有:none,copy,link和move。
effectAllowed:这个属性返回所允许的操作类型。设置这个属性就可以修改允许的操作。它持的值有:none,copy,copyLink,copyMove,link,linkMone,move,all和uninitialized.
页:
[1]