如何通过Vue自定义指令轻松实现长尾词拖拽功能？

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

本例展示了Vue使用自定义指令实现拖拽行为。分享给家长供参考，具体如下：

需求：通过自定义指令的方式实现拖拽效果。

预期使用方式：

本文实例讲述了Vue使用自定义指令实现拖拽行为。分享给大家供大家参考，具体如下：

需求

通过自定义指令的方式实现拖拽效果，预期的使用方式为：

<div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div>

更重要的一个需求点：

• 拖拽元素内部的子元素可以自行阻止拖拽行为

比如：

<div style="background: #f00; width: 200px; height: 200px;" v-drag> <el-button @mousedown.native.stop>test</el-button> </div>

曾经使用过vue-resizable，由于该组件是通过事件捕获的方式实现的，拖拽元素的子元素也会触发拖拽行为，不符合开发需求，所以自行实现了拖拽指令，相关源码如下。