Vue 拖拽组件 vuedraggable 和 vue-dragging

一、描述

二、vuedraggable

三、Awe-dnd

一、描述

之前用 vue 写过一个在线的多二维码生成服务，体验地址：https://postbird.gitee.io/vue-online-qrcode/

后面发现二维码多了之后有时候想要排序，需要将比较重要的放在上面或者第一个，因此拖拽排序的需求就出来了。

知道 vue 肯定是有组件存在的，因此就直接搜了搜，找了两个不同的库分别是：

vuedraggable

awe-dnd

两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。

二、vuedraggable

vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。

使用方式：

yarn add vuedraggable

import vuedraggable  from  'vuedraggable';

在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。

引入后直接声明该组件然后使用即可，示例代码：

代码：

 

   

     

       

{{item}}

     

   

 

效果：

官方的示例：

https://david-desmaisons.github.io/draggable-example/

更多的事件及使用方法请参阅：

https://github.com/SortableJS/Vue.Draggable

三、Awe-dnd

vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。

安装依赖：

npm install awe-dnd--save

yarn add awe-and

使用：

代码：

import VueDND from 'awe-dnd'

Vue.use(VueDND)

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

而提供的两个事件方法如下：

一般使用的方法就是：

效果：

文章版权：Postbird-There I am , in the world more exciting!

文章转载地址：http://www.ptbird.cn/vue-draggable-dragging.html