VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。
这是我在我的项目中用过的最好的拖拽排序解决方案了。

Vue.Draggable 简直满足拖拽性能的所有需要，反对 cdn 间接引入js文件，反对 Vue cli 形式引入。官网有很具体的文档以及十分短缺的代码例子，上手非常容易。

应用步骤如下：

  1. npm i -S vuedraggable

  2. 在须要用的页面中引入

    <template> <div> <!--应用draggable组件--><draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">   <transition-group>    <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>   </transition-group></draggable>  </div></template><style scoped>       /*被拖拽对象的款式*/       .item {           padding: 6px;           background-color: #fdfdfd;           border: solid 1px #eee;           margin-bottom: 10px;           cursor: move;       }        /*选中款式*/       .chosen {           border: solid 2px #3089dc !important;       }</style><script>//导入draggable组件import draggable from 'vuedraggable'export default { //注册draggable组件  components: {           draggable,       },  data() {   return {      drag:false,     //定义要被拖拽对象的数组     myArray:[       {people:'cn',id:1,name:'www.itxst.com'},       {people:'cn',id:2,name:'www.baidu.com'},       {people:'cn',id:3,name:'www.taobao.com'},       {people:'us',id:4,name:'www.google.com'}       ]    }; }, methods: {    //开始拖拽事件     onStart(){       this.drag=true;     },     //拖拽完结事件      onEnd() {      this.drag=false;   }, },};

这是Vue.Draggable的官网文档地址,内容较为具体。
http://www.itxst.com/vue-drag...