HTML中如何实现元素的拖放功能draggable？

本文共计451个文字，预计阅读时间需要2分钟。

最近接触到一拖拽交互操作，一开始就想到了传统的mouseUp、mouseDown、mouseMove这类方法。但偶然看到H5的draggable属性，觉得挺有意思！先看看实现的效果。

如图所示，场景非常适用。

最近接到一拖拽交互操作，开始的时候就想着传统的mouseUp,mouseDown，mouseMove之类的方法。但是偶然看到H5的draggable属性，觉得更香啊！先看下实现的效果。

如图所示的场景就很适合使用该API，拖拽的过程中鼠标还带着对应的元素样式。

draggable="true"

设置元素可拖拽，很简单，直接加个draggable="true"属性即可

<li v-for="(item, index) of labels" :key="item.id" :draggable="true" > </li> 操作API

1. dragstart: 元素开始拖动时触发
2. dragover: 被拖动的元素hover到目标元素上时触发
3. dragleave: 被拖动的元素离开目标元素上时触发
4. dragend: 元素拖动结束时触发
5. drag: 元素拖动过程中持续触发

<li v-for="(item, index) of labels" :key="item.id" :draggable="true" @dragover.prevent.stop @dragstart="dragStart($event, item)" @dragleave="dragleave(item.id)" @dragend="dragend" > <div @dragover.prevent.stop> // other code .... </div> </li> 拖动样式

可以看到上面的代码有个@dragover.prevent.stop，这是因为在拖放的过程中遇到当一个li上有其他元素，例如div p 等，在拖动到其他元素时会出现禁止拖动的图标
这是因为当拖动元素经过document的时候，document对象会默认阻止拖动事件，因此需要将不需要显示禁止拖动的元素上设置阻止默认事件。