Skip to content

拖放

可拖放 - draggable

html
<img draggable="true" />
<img draggable="true" />

拖动什么 - ondragstart

  • drag(event) 规定了被拖动的数据
  • dataTransfer.setData() 设置被拖数据的数据类型和值
  • 数据类型是 "Text",值是可拖动元素的 id ("img1")

放到何处 - ondragover

  • ondragover 事件规定在何处放置被拖动的数据。
  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

进行放置 - ondrop

  • 当放置被拖数据时,会发生 drop 事件
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素(目标元素)中

事件详解

DataTransfer 拖拽对象用来传递的媒介,使用一般为Event.dataTransfer

ondragstart 当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上

ondragenter 当拖拽元素进入目标元素的时候触发的事件,此事件作用在目标元素上

ondragover 拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上

ondrop 被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上

ondragend 当拖拽完成后触发的事件,此事件作用在被拖曳元素上

Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉

Event.effectAllowed 就是拖拽的效果 node copy move

Reference

https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

https://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-拖拽与拖放简介/