使用 draggable 拖拽列表

1.安装

npm install vuedraggable  

2.引入

import draggable from 'vuedraggable'

3.注册

components: { 
  draggable
}

4.使用--大概逻辑

   html

    @end="pitchonEnd" 为拖拽结束事件

<!-- 第一列-->
 <div class="one">
   <draggable :group="groupA" v-model="oneList" @end="pitchonEnd">
     <div v-for="item,index in oneList" key="index">
        <h1>{{item.xxx}}</h1>
     </div>
   </draggable>
 </div>

<!-- 第二列-->
 <div class="two">
   <draggable :group="groupB" v-model="twoList" @end="pitchonEnd">
     <div v-for="item,index in twoList" key="index">
        <h1>{{item.xxx}}</h1>
     </div>
   </draggable>
 </div>

   js

  data() {
    return {
      oneList:[],
      twoList:[],
      groupA: {
        name: "pitchon_line",
        pull: true,
        put: () => {},
      },
      groupB: {
        name: "pitchon_line",
        pull: true,
        put: () => {},
      },
    };
  },


  methods: {
    //拖拽回调
    pitchonEnd() {
      // 如果超过多少个个数就停止拖拽功能
      if (this.twoList.length === 3) {
        return (this.groupA.pull = false);
      } else {
        return (this.groupA.pull = true);
      }
    },
  },