js:拖拽事件
拖拽事件
-
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, 其他两个表示图像出现的鼠标位移 |
本文标题：js:拖拽事件
本文链接：https://www.haomeiwen.com/subject/uojvvxtx.html
网友评论