vue实现上下拖动div+处理二维数组

<transition-group tag="div" class="container">
  <div class="item" v-for="(item,i) in option" :key="i">
    <span v-for="txtoption in item.option" draggable="true"
          @dragstart="handleDragStart($event, item)"
          @dragover.prevent="handleDragOver($event, item)"
          @dragenter="handleDragEnter($event, item)"
          @dragend="handleDragEnd($event, item)" >
      {{txtoption.txt}}</span>
  </div>
</transition-group>　

export default {
  name: "",
  data() {
    return {
      option:[],//选项
      dragging: null
    };
  },
  methods: {
    handleDragStart(e,item){
      this.dragging = item;
    },
    handleDragEnd(e,item){
      this.dragging = null
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e,item,quesid){
      let that=this;
      e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
      if(item === this.dragging){
        return
      }
      const newItems = [...this.option]
      console.log(newItems)
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.option = newItems
   },
  }
 }