vue vuedraggable两个不同模块之间拖拽

<draggable
  group='task'
  v-model='items'
  @add='addCollection'
  animation="1000">
    <transition-group tag="div" class="container">
      <div class="item" 
          :class="'item' + item.id"
          v-for="item in items" :key="item.id"
          draggable="true"
          animation="1000">
         <div id="charts-demo" v-if="item.id === 1" class='item-echarts'></div>
         <div id="charts-demo2" v-if="item.id === 2" class='item-echarts'></div>
         <div id="charts-demo3" v-if="item.id === 3" class='item-echarts'></div>
    </transition-group>
</draggable>
<draggable
  group='task'
  v-model='dragItems'
  animation="1000">
    <transition-group tag="div" class="container">
      <div class="item" 
          :class="'item' + item.id"
          v-for="item in dragItems" :key="item.id"
          draggable="true"
          animation="1000">
         <div id="charts-demo4" v-if="item.id === 4" class='item-echarts'></div>
         <div id="charts-demo5" v-if="item.id === 5" class='item-echarts'></div>
         <div id="charts-demo6" v-if="item.id === 6" class='item-echarts'></div>
    </transition-group>
</draggable>
data() {
  return {
    items: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
    dragItems: [
        { id: 4 },
        { id: 5 },
        { id: 6 }
methods: {
  addCollection (evt) {
    console.log('evt', evt)