如何才能从不同的组中拖动卡？

Question

即使我根据文档进行了所有操作，也无法在不同组之间转移卡。

我想用Sortablejs plugin来做，但是由于我不知道的原因，它不起作用。可能是由于属性（：group）所致，因为我不明白它的用途。

window.appLogic = new Vue({
   el: '#app',
   data: {
      drag: true,
      inputs: [
         '2MnO4-',
         '2MnO4-'
      ],
      cards_position: {
         'cards': [
            {
               id: 1
            },
            {
               id: 4
            }
         ],
         'electrons': [
            {
               id: 2
            },
            {
               id: 5
            }
         ],
         'odds': [
            {
               id: 3
            },
            {
               id: 7
            }
         ]
      }
   },
   computed: {
      inputs_html: function(){
         return [
            this.$options.filters.chemistry(this.inputs[0]),
            this.$options.filters.chemistry(this.inputs[1])
         ]
      }
   },
   filters: {
      chemistry: function(value){

         value = value.replace(/([-+])(\d+)?$/g, "<sup>$2$1</sup>");
         value = value.replace(/([A-Za-z])(\d)/g, "$1<sub>$2</sub>");

         return value;
      }
   }
})

html {
  font-size: 14px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

.cardsAvailable {
  width: 100%;
  padding: 3px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  min-height: 60px;
}
.cardsAvailable .draggable-element {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 7px;
}

.playingField {
  width: 600px;
  height: 300px;
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
}
.playingField .descriptionText {
  border: 1px solid black;
  padding: 7px;
  width: 80%;
}
.playingField__dragField {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.playingField__dragField_section {
  height: 100%;
}
.playingField__dragField_section div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.playingField__dragField_section.electrons, .playingField__dragField_section.odds {
  width: 60px;
  display: flex;
  align-items: center;
}
.playingField__dragField_section.electrons div, .playingField__dragField_section.odds div {
  height: 60%;
}
.playingField__dragField_section.electrons .draggable-element, .playingField__dragField_section.odds .draggable-element {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 40px;
  height: 40px;
  border: 1px solid black;
}
.playingField__dragField_section.mod {
  width: 100px;
}
.playingField__dragField_section.reactionItems {
  width: 150px;
}
.playingField__inputs {
  width: 150px;
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.playingField__inputs .input {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.playingField__inputs .input .preview {
  border: 1px solid #d5d5d5;
  height: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: not-allowed;
}
.playingField__inputs .input input {
  outline: none;
  border: 1px solid #d5d5d5;
  padding: .3em;
  border-bottom: none;
}
.playingField__sideText--left {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.playingField [class^='playingField__sideText'] {
  margin-left: .4em;
  margin-right: .4em;
  width: 40px;
  height: 100%;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<div id="app">
  <div class="playingField">
    <div class="playingField__sideText--left">Исходные вещества</div>
    <div class="playingField__inputs">
      <div class="input">
        <input v-model="inputs[0]"/>
        <div class="preview" v-html="inputs_html[0]"></div>
      </div>
      <div class="descriptionText">Принимаемые и отдаваемые электроны</div>
      <div class="input">
        <input v-model="inputs[1]"/>
        <div class="preview" v-html="inputs_html[1]"></div>
      </div>
    </div>
    <!-- draggable part      -->
    <div class="playingField__dragField">
      <div class="playingField__dragField_section electrons">
        <div is="draggable" :list="cards_position.electrons" :group="cards_position">
          <div class="draggable-element" v-for="item in cards_position.electrons" :key="item.id">{{item.id}}</div>
        </div>
      </div>
      <div class="playingField__dragField_section mod"></div>
      <div class="playingField__dragField_section odds">
        <div is="draggable" :list="cards_position.odds" :group="cards_position">
          <div class="draggable-element" v-for="item in cards_position.odds" :key="item.id">{{item.id}}</div>
        </div>
      </div>
      <div class="playingField__dragField_section reactionItems"></div>
    </div>
    <div class="playingField__sideText--right">Продукты реакции</div>
  </div>
  <!-- Cards-->
  <p>Доступные карточки:</p>
  <div class="cardsAvailable" is="draggable" :list="cards_position.cards" :group="cards_position">
    <div class="draggable-element" v-for="item in cards_position.cards" :key="item.id">{{item.id}}</div>
  </div>
</div>

我可以在(5, 2) (3, 7) (4, 1)组内转移卡，但是我需要在(5, 7) (4, 1, 2)组之间转移。