html5拖拽vue,拖拽属性vue实例

HTML5 原生拖放

拖放流程

选中 → 拖动 → 释放

选中

html 中图片，链接，文本默认可以拖动， 其他元素不能拖动

为了使这些元素可以被拖动， 需要将元素的 draggable 设置为 true

draggable属性的值： true， false， auto

拖动

拖动可分为： 拖动开始、拖动中、拖动结束，针对这3个过程事件

事件对象

事件名称

事件说明

被拖动的元素

dragstart

拖动开始时触发

被拖动的元素

drag

拖动过程中每隔一定事件触发一次

被拖动的元素

dragend

拖动结束时触发

目的地元素

dragenter

进入目标元素时触发

目的地元素

dragover

在目标元素中时触发

目的地元素

dragleave

离开目标元素时触发

释放

释放元素事件

事件对象

事件名称

事件说明

目的地元素

drop

拖动完成时触发

事件说明

拖放事件触发的派发对象 DragEvent 与鼠标派发对象 MouseEvent 相同，还增加了 dataTransfer 属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。

dragstart

可被拖放元素开始被拖动时触发， 可在此时缓存一些被拖放元素的信息

drag

可被拖放元素在拖动过程中定时触发

dragend

可被拖放元素拖动结束时触发， 该事件实际结束时间比鼠标松开时间晚， 比 dragleave 事件触发时间晚

dragenter

拖动其他元素进入该元素时触发， 该事件触发时间为鼠标指针进入元素时

dragover

拖动其他元素在该元素中移动时触发

draglevel

拖动其他元素离开该元素时触发， 该事件触发时间为鼠标指针离开元素时。

鼠标没有离开，拖动结束也会触发该事件，且在 dragend 事件之前执行

drop

拖放动作完成时触发的事件， 该事件存在于 draglevel 事件之前， 可以作为鼠标松开瞬间的判断

==注： dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素，所以需要完成拖放功能，要在这两个事件中添加阻止默认行为 e.preventDefault()。否则不会触发 drop 事件==

实例

vue实例

• {{li.label}}