vue 实现拖拽排序

文档：

http://www.itxst.com/vue-draggable/n6rzmqj3.html

效果：

源码：

<template>
    <div>
    <!--使用draggable组件-->
   <draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" 

   group="people1" animation="1000" @start="onStart" @end="onEnd">
      <transition-group>
       <div class="item" v-for="(element,index) in myArray" :key="element.id" style="color: lightseagreen;">{{element.name}} {{index}}</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 1px #3089dc !important;
          }
  </style>
  <script>
  //导入draggable组件
  import draggable from 'vuedraggable'
  export default {
    //注册draggable组件
     components: {
              draggable,
          },
     data() {
      return { 
        drag:false,
        //定义要被拖拽对象的数组
        myArray:[
          {people:'cn',id:1,name:'get001'},
          {people:'cn',id:2,name:'pOST002'},
          {people:'cn',id:3,name:'DELETE'},
          {people:'us',id:4,name:'PATCH'}
          ], 
        sortedArray:[]
      };
    },
    methods: {
       //开始拖拽事件
        onStart(){
          this.drag=true;
        },
        //拖拽结束事件
         onEnd() {
         this.drag=false;
         this.sortedArray=this.myArray
         console.log(this.sortedArray)
      },
    },
  };
  </script>