vue 试卷拖动题号改变顺序

一、template模版
`

{{ques.questionSort}}
`

二、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')
},

`

你可能感兴趣的:(vue 试卷拖动题号改变顺序)