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, 其他两个表示图像出现的鼠标位移