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...


柳慕笙
37 声望1 粉丝