Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件
以上是Vue.Draggable的官网介绍。
Vue.Draggable使用起来是非常方便的，下面我来介绍一下它在vue中基本的用法。
1：下载安装
npm i -S vuedraggable
2：在你需要的页面中导入它
// 将它导入你的页面中import vuedraggable from 'vuedraggable'// 它是个组件，所以你需要把它注册为局部组件。（当然，你也可以将它注册为全局组建供你随时使用）components: {vuedraggable}
3：让我们来使用它
1：这是 vueDraggable 固定的基本结构
<vuedraggable><transition-group><!-- 这里面放你需要拖拽的元素 --></transition-group></vuedraggable>
2：当然，为了实现它的功能我们需要给它加上属性和数据。
HTML：
v-model ：拖拽组件必须的属性，绑定的是要拖拽移动的数组。
<vuedraggable v-model="arr" class="draggable"><transition-group><div class="item" v-for="(item, i) in arr" :key="i">{{item}}</div></transition-group></vuedraggable>
CSS:
.draggable {width: 500px;margin: auto;}.item {height: 40px;line-height: 40px;margin-bottom: 20px;background-color: skyblue;text-align: center;color: #fff;cursor: move;}
JS：
data () {return {arr: [1, 2, 3, 4, 5, 6, 7]}}
效果图如下：
当然了，此时你只能进行简单的数据拖拽而已，如果想要更加炫酷的效果我们需要加上其他的属性了。
3：更多的属性，更炫酷的效果。
我们可以加上 chosen-class 和 animation 来让动画过渡更加的丝滑。
chosen-class： 定义被选中拖拽时元素的样式，需要在样式后面加上 !important，并且需要开启force-fallback="true"这个属性。
animation：拖动时的动画效果时间，单位毫秒
HTML:
<!-- 在刚才的基础上我们增加了 chosen-class、force-fallback、animation属性。--><vuedraggable v-model="arr"chosen-class="chose"force-fallback="true"animation="1000"class="draggable"><transition-group><div class="item"v-for="(item, i) in arr":key="i">{{item}}</div></transition-group></vuedraggable>
CSS:
.chose {background-color: pink;border: 1px solid #000 !important;cursor: move !important;}
效果如下：
请忽略这个水印。。。。
