vue.draggable 使用 transition-group无法拖入一个空数组

1、需求: 可以在当前数组拖动，亦可拖动到其它数组, 如图：

2、最开始都是空数组，后来左边数组有数据，右边还是空数组，但是发现拖动无效

<div class="itemBox">
  <div class="checkBox">
    <div class="checkBox_top">
      显示监测项
    </div>
    <div class="checkBox_bm">
      <div class="title">监测项名称</div>
      <div class="haveData">
        <draggable v-model="showPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart" @add="handleAdd">
          <transition-group>
            <div class="item" v-for="item in showPostLableIdList" :key="item.id">{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
      <!-- <a-empty v-else /> -->
    </div>
  </div>
  <div class="noCheckBox">
    <div class="noCheckBox_top checkBox_top">
      隐藏监测项
    </div>
    <div class="checkBox_bm">
      <div class="title">监测项名称</div>
      <div class="haveData">
        <draggable v-model="hiddenPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart1" @add="handleAdd1">
          <transition-group>
            <div class="item" v-for="item in hiddenPostLableIdList" :key="item.id" >{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
      <!-- <a-empty v-else /> -->
    </div>
  </div>
</div>

3、中间还出现一个小插曲，就是想着没有空数组的时候显示空数据组件，然后也是没有效果的，后面看到 https://www.jianshu.com/p/770bbda1d9e4大佬写的这篇文章，要给 transition-group标签高度

4、注意要转成块级元素哦， 高度百分比也是无效的哟，完成代码：

<div class="itemBox">
  <div class="checkBox">
    <div class="checkBox_top">
      显示监测项
    </div>
    <div class="checkBox_bm">
      <div class="title">监测项名称</div>
      <div class="haveData">
        <draggable v-model="showPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart" @add="handleAdd">
          <transition-group style="display: block;height: 1.5rem">
            <div class="item" v-for="item in showPostLableIdList" :key="item.id">{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
  <div class="noCheckBox">
    <div class="noCheckBox_top checkBox_top">
      隐藏监测项
    </div>
    <div class="checkBox_bm">
      <div class="title">监测项名称</div>
      <div class="haveData">
        <draggable v-model="hiddenPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart1" @add="handleAdd1">
          <transition-group style="display: block;height: 1.5rem">
            <div class="item" v-for="item in hiddenPostLableIdList" :key="item.id">{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</div>

// 拖拽
.itemBox {
  display: flex;
  margin-bottom: 16px;
  .checkBox {
    width: 50%;
    .checkBox_top {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .noCheckBox {
    flex: 1;
  }
  .checkBox_top {
    padding: 0px 12px 6px 12px;
  }
  .checkBox_bm {
    padding-bottom: 12px;
    border: 1px solid #ccc;
    .title {
      padding: 6px 12px;
    }
    .haveData {
      height: 1.5rem;
      overflow-y: auto;
    }
  }
}
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}

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

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

.item + .item {
  border-top: none;
  margin-top: 6px;
}

2022年，做更好的自己！