Solve vue.draggable official website bug; Multiple column drag, a column can not drag when empty problem

First, the bug

Two, after the solution

Third, solutions

<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: 'money' },
        { id: 2.name: 'on Tuesday' },
        { id: 3.name: 'Joe' },
        { id: 4.name: 'bill'},].arr2: [{id: 5.name: 'Cathy' },
        { id: 6.name: 'Daisy' },
        { id: 7.name: 'lai seven' },
        { id: 8.name: 'von eight'},].arr3: [{id: 9.name: 'skin nine' },
        { id: 10.name: 'pretty ten'}}},],methods: {
    // Start dragging events
    onStart () {
      this.isDrag = true;
    },
    // Drag to end the event
    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>

Copy the code