解决vue.draggable官网bug;多列拖拽,某列为空时无法拖拽问题

一, 先上bug

二, 解决后

三, 解决方法

<template>
  <div class="custom_row">
    <div class="custom_col">
      <draggable v-model="arr1"
                 group="site"
                 class="dragItem_group"
                 animation="300"
                 dragClass="dragClass"
                 ghostClass="ghostClass"
                 chosenClass="chosenClass"
                 @start="onStart"
                 @end="onEnd">
        <transition-group>
          <div class="dragItem"
               v-for="item in arr1"
               :key="item.id">{{item.name}}</div>
        </transition-group>
      </draggable>
    </div>
    <div class="custom_col">
      <draggable v-model="arr2"
                 group="site"
                 class="dragItem_group"
                 animation="300"
                 dragClass="dragClass"
                 ghostClass="ghostClass"
                 chosenClass="chosenClass"
                 @start="onStart"
                 @end="onEnd">
        <transition-group>
          <div class="dragItem"
               v-for="item in arr2"
               :key="item.id">{{item.name}}</div>
        </transition-group>
      </draggable>
    </div>
    <div class="custom_col">
      <draggable v-model="arr3"
                 class="dragItem_group"
                 group="site"
                 animation="300"
                 dragClass="dragClass"
                 ghostClass="ghostClass"
                 chosenClass="chosenClass"
                 @start="onStart"
                 @end="onEnd">
        <transition-group>
          <div class="dragItem"
               v-for="item in arr3"
               :key="item.id">{{item.name}}</div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      isDrag: false,
      arr1: [
        { id: 1, name: '钱一' },
        { id: 2, name: '周二' },
        { id: 3, name: '张三' },
        { id: 4, name: '李四' },
      ],
      arr2: [
        { id: 5, name: '王五' },
        { id: 6, name: '赵六' },
        { id: 7, name: '赖七' },
        { id: 8, name: '冯八' },
      ],
      arr3: [
        { id: 9, name: '皮九' },
        { id: 10, name: '蛮十' },
      ]
    }
  },
  methods: {
    //开始拖拽事件
    onStart () {
      this.isDrag = true;
    },
    //拖拽结束事件
    onEnd () {
      this.isDrag = false;
    },
  }
}
</script>

<style>
.custom_row {
  display: flex;
  justify-content: space-between;
}
.custom_col {
  width: 32%;
  min-height: 400px;
  border: 1px solid #f4f4f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px 0;
}

.ghostClass {}

.chosenClass {
  opacity: 1 !important;
}

.dragClass {
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.dragItem {
  padding: 6px 12px;
  margin: 0px 10px 10px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.dragItem:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.dragItem_group {
  height: 100%;
}
.dragItem_group span {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
</style>