拖拽包含了两个大的操作,拖拽以及释放
拖拽:drag
释放:drop
参考w3c的拖拽事件,了解一下拖拽事件的所有不同部分,这是按照拖拽的过程进行的解释
1.把元素设置为可拖拽
设置元素的属性draggable 为true
2.拖拽什么
ondragstart和setData 规定当元素拖拽时进行的操作
3.被拖拽的元素放到哪里
ondragover 规定在何处放置被拖拽的元素
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
4.进行放置
当放置被拖数据时,会发生 drop 事件。
之后看 冯晓东的博客,他把这些方法按照源对象和目标对象的维度又进行了一下区分
被拖动的源对象可以触发的事件:
(1)ondragstart:源对象开始被拖动
(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend:源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件:
(1)ondragenter:目标对象被源对象拖动着进入
(2)ondragover:目标对象被源对象拖动着悬停在上方
(3)ondragleave:源对象拖动着离开了目标对象
(4)ondrop:源对象拖动着在目标对象上方释放/松手
·········以上是对事件的简单介绍,,具体实现demo见下一随笔