关于前端:VueDraggable拖拽排序组件

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…