简介：

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

特性

支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时，可以抛出所有变化
可以和现有的UI组件兼容

操作步骤：

1. 安装
   1
   npm install vuedraggable
   2.引入
   1
   import draggable from ‘vuedraggable’
   3.基础用法　　
   定义一个json串 list，实现它的拖拽排序。

<template>
  <div>
    <!-- 调用组件  -->
    <draggable element="ul" v-model="list">
      <li v-for="item in list">{{item.name}}</li>
    </draggable>
    <!-- 输出list数据 -->
    {{list}}
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
export default {
  name: 'demo',
  components: {
    //调用组件
    draggable,
  },
  data () {
    return {
      list:[
        {id: 1,name: 'a'},
        {id: 2,name: 'b'},
        {id: 3,name: 'c'},
        {id: 4,name: 'd'},
        {id: 5,name: 'e'},
        { id: 6,name: 'f'},
      ]
    }
  },
}
</script>

数据原扩展
value和list都可以给一个draggable注入数据源（基本用法中使用的是list的方法）

/*value注入数据源*/
<draggable v-model="list" ></draggable>
export default {
    data() {
        return {
         list:[{
            name:'aaa',id:1,
            },{
            name:'bbb',id:2,
            }]
        };
    }
}
/*list注入数据源头*/
<draggable :list="list" ></draggable>
export default {
    data() {
        return {
         list:[{
            name:'aaa',id:1,
            },{
            name:'bbb',id:2,
            }]
        };
    }
}

区别：

1. 代码 ：就是 v-model (value注入)和 :list = “list” (list注入)

2. 效果 ：value注入的，如果发生了拖拽，value的数据并不会跟着变化，

list注入的，数据则会发生变化

也就是说，value注入的，后续有无变化都和数据体没关系，它用于只需要展示拖拽效果的地方；

list注入的，数据体和当前页面上的属性保持一致，页面上的顺序变了，内部数组对应的结构体数组的顺序也会重新排列，和显示的一致

注意：他们不能同时出现，只能二选一

https://www.cnblogs.com/meiyanstar/p/14278789.html