拖拽事件对象
触发触摸事件对象的事件
需要将元素的draggable属性设置为true
| 事件名 |
描述 |
drag |
拖拽元素：拖拽过程中，连序触发 |
dragstart |
拖拽元素：拖拽开始 |
dragend |
拖拽元素：拖拽结束 |
dragleave |
拖拽元素离开目标元素 |
dragenter |
目标元素：拖拽元素进入时 |
dragover |
目标元素：拖拽元素停留在目标元素上，需要在此事件上取消默认事件，否则默认会归位 |
drop |
目标元素：拖拽元素在目标元素上松开鼠标时 |
DragEvent接口
DragEvent接口继承MouseEvent接口
构造方法
- 通常使用事件的构造函数是用来做
EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
- 该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性
| 配置项 |
描述 |
dataTransfer |
DataTransfer实例对象，可以为null但是不能为其他值 |
DataTransfer接口
构造方法
DataTransfer实例对象作为DragEvent对象中的dataTransfer属性- 该构造方法不接受任何参数
实例属性
| 属性名 |
描述 |
DataTransfer.dropEffect |
拖拽时鼠标效果，需要在dragover事件中使用；copy=复制、move=移动、link=连接、none=禁止放下 |
DataTransfer.effectAllowed |
限制dropEffect的操作，需要在dragstart事件中使用；除拉dropEffect中的字符串之外，还有copyLink=允许复制或连接操作、copyMove=允许复制或移动操作、linkMove=允许连接或移动、all=允许所有 |
DataTransfer.files |
拖拽本地文件到网页时的文件列表，需要将dragover和drop默认行为取消掉，在drop事件中对该属性进行操作 |
DataTransfer.types |
拖拽元素的类型，在drop事件中对该属性进行判断 |
DataTransfer.items |
包含本次所有的拖拽对象，在drop事件中使用，该对象是DataTransferItemList集合实例，该集合中存放DataTransferItem元素 |
DataTransferItemList接口
| 方法或属性名 |
描述 |
length |
成员数量 |
add(data,type) |
添加通过指定内容和类型的字符串，类型是MIME值，比如text/html |
add(file) |
添加一个文件对象 |
remove(index) |
删除指定位置的成员 |
clear() |
清空集合 |
DataTransferItem接口
| 方法或属性名 |
描述 |
kind |
成员的种类，string或file |
type |
字符串的类型MIME值 |
getAsFile() |
若是文件则返回该文件，否则返回null |
getAsString(callback) |
若是字符串则使用异步回调函数处理该字符串，回调函数中的第一个参数是该字符串 |
实例方法
| 方法名 |
描述 |
DataTransfer.setData(type,data) |
用于在dragstart事件中像后续事件传递信息，type是MIME值的数据类型，data是具体数据 |
DataTransfer.getData(type) |
获取指定类型的设置数据 |
DataTransfer.clearData() |
清空设置的数据 |
DataTransfer.setDragImage(imgNode,x,y) |
在dragstart事件中使用，将拖拽元素拖拽时替换为这个图片元素；x和y是相对鼠标的位置；只能是img节点元素，否则无效果 |
Comments NOTHING