vue 试卷拖动题号改变顺序

一、template模版
`

<div id="number_box" class="number-box">
        <span
            v-for="ques in item.viewQuestionGroupDTOS"
            :key="ques.questionId"
            draggable="true"
            @dragstart="handleDragStart($event, ques, item)"
            @dragover.prevent="handleDragOver($event, ques,item)"
            @dragenter="handleDragEnter($event, ques,item)"
            @dragend="handleDragEnd($event, ques,item)"
          >{{ques.questionSort}}</span>
  </div>`

二、js部分 拖拽
`

handleDragStart(e, item, father) {
  this.dragging = item
  console.log('handleDragStart')
},
handleDragEnd(e, item, father) {
  this.dragging = null
  //this.$emit("changeSort");
  this.$emit('changeSort', this.deepCopy(this.paperData))

  console.log('end')
},
//首先把div变成可以放置的元素，即重写dragenter/dragover
handleDragOver(e) {
  e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
  console.log('handleDragOver')
},
handleDragEnter(e, item, father) {
  e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
  if (item === this.dragging) {
    return
  }
  if (father) {
    // 拖到小题
    const newItems = [...father.viewQuestionGroupDTOS]
    console.log(newItems)
    const src = newItems.indexOf(this.dragging)
    const dst = newItems.indexOf(item)
    newItems.splice(dst, 0, ...newItems.splice(src, 1))
    father.viewQuestionGroupDTOS = newItems
  } else {
    // 拖到大题
    const newItems = [...this.paperData.viewPaperGroupDTOS]
    console.log(newItems)
    const src = newItems.indexOf(this.dragging)
    const dst = newItems.indexOf(item)
    newItems.splice(dst, 0, ...newItems.splice(src, 1))
    this.paperData.viewPaperGroupDTOS = newItems
  }
  console.log('handleDragEnter')
},

`