拖放
可拖放 - draggable
html
<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-拖拽与拖放简介/