vue.draggable两列或多列之间拖入问题

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>vue.draggable两列或多列之间拖入问题</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
  <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
  <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
  <style>
    /*定义要拖拽元素的样式*/
    .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;
    }

.itxst {
      margin: 10px;
    }

.title {
      padding: 6px 12px;
    }

.col {
      width: 40%;
      flex: 1;
      padding: 10px;
      border: solid 1px #eee;
      border-radius: 5px;
      float: left;
    }

.col+.col {
      margin-left: 10px;
    }

.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;
    }
  </style>
</head>

<body style="padding:10px;">
  <div id="app">
    
    <div class="itxst">
      <div class="col">
        <div class="title">A组(只能往B组拖入)</div>
        <draggable v-model="arr1" :group="grpupA" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd">
          <transition-group :style="style">
            <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">B组（本组不能拖入A组）</div>
        <draggable v-model="arr2" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd">
          <transition-group :style="style">
            <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
  <script>
    // debugger;
    Vue.component('vuedraggable', window.vuedraggable.name)
    var app = new Vue({
      el: '#app',
      components: {
        vuedraggable,
      },
      data() {
        return {
          drag: false,
          grpupA: {
            name: 'site',
            pull: true,
            put: false
            },
            arr1: [
            { id: 1, name: 'www.itxst.com' },
            { id: 2, name: 'www.jd.com' },
            { id: 3, name: 'www.baidu.com' },
            { id: 4, name: 'www.taobao.com' }
          ],
          arr2: [],
          //空数组之在的样式，设置了这个样式才能拖入
          style: 'min-height:120px;display: block;'
        };
      },
      methods: {
        onStart() {
          this.drag = true;
        },
        onEnd() {
          this.drag = false;
        },

}
    });
  </script>
</body>

</html>