Vue 也能实现拖拽了 (vue-dragging)

Posted 2023-03-07

参考技术A vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，
特点 : 封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。

第一步: 安装

第二步: 引入

第三步: 使用

童鞋们发现一个特殊指令: v-dragging=" item: item, list: dataList, group: 'color' "
这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表， group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

还有提供两个方法: