拖拽事件
-
ondragstart
当拖拽元素被开始拖拽时，event：拖拽元素。
[从操作系统向浏览器拖拽文件不会触发]
[对应ondragend] -
ondragover
当拖拽元素在目标元素上移动时，event：目标元素
[注意：应该在此事件阻止默认事件，event.preventDefault()，否则不会触发ondrop()] -
ondragenter
当拖拽元素进入目标元素时，event：目标元素
[对应ondragleave] -
ondragleave
当拖拽元素离开目标元素时，event：目标元素
[对应ondragenter] -
ondrop
当拖拽元素在目标元素上松开时，event：目标元素 -
ondragend
当拖拽元素松开时，event：拖拽元素
[对应ondragstart]
[从操作系统向浏览器拖拽文件不会触发]
注意
1.ondrop优先触发于ondragend
2.先定义一个可拖拽物体 draggable='true'
drag event属性/方法
-
dataTransfer对象
保存被拖动的数据，可以保存一项或多项数据，一种或者多种数据类型
| 属性 | 介绍 | 值 |
|---|---|---|
| dropEffect | dragenter|dragover中设置，防止操作 | ’move'/'none'/ |
| effectAllowed | dragstart设置，在dragenter|dragover中监听，移动操作 | 'move'/'none'/'link'/'copy'/copyMove'/'copyLink'/'linkMove'/'all' |
| files | 拖动操作的所有本地文件列表 | |
| types | 返回被保存数据的字符串型数组，顺序与被添加数据的顺序一致，若无，返回空列表 | [event.dataTransfer.types].includes('text/html') |
| 方法 | 介绍 |
|---|---|
| setData(format/type,dataValue) | 将dataValue数据保存起来，为后面取数据能做操作(检测类型，拖放到目标元素等) format: text/plain(文本类型);text/html(html类型);text/url-list(URL类型) |
| getData(format/type) | 获取前面setData中的type |
| clearData(format/type) | 清除data |
| setDragImage(image,xOffset,yOffset) | 设置拖拽反馈图像 image:可以是canvas/image Element, 其他两个表示图像出现的鼠标位移 |
