vue自定义元素拖动

岗位序列拖动交换岗位

<span
            draggable="true"
            @dragstart="onDragstart($event,index,index2)"
            @dragend="onDragend($event)"
            @dragover="onDragover($event)"
            @drop="onDrop($event,index,index2)"
            slot="reference"
            @click="showPositonEdit(sequence,index)"
            :class="['el-btn-position',sequence.showNodes.length>=2?'el-btn-position-plus':'',sequence.showItem.showPosTag?'position_tag':'']"
            :style="{zIndex:sequence.showItem.highLightIndex?'6':'auto'}"
            :title="sequence.showNodes.length>=2?'':sequence.showItem.positionName"
          >
            {{sequence.showItem.positionName.substring(0,6)}}
            <span
              v-if="sequence.showNodes.length>=2 && !sequence.showItem.showPosTag"
              class="icon_num"
            >{{sequence.showNodes.length}}</span>
          </span>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// 拖动
    onDragstart (e, index, index2) {
      this.tempDragObj = {}
      this.dragObj.fromMapId = ''
      this.dragObj.toGradeId = ''
      this.dragObj.toSeriesId = ''
      const { pid } = this.queryId(index, index2)
      this.dragObj.fromMapId = pid
    },
    async onDragend (e) {
      if (this.dragFlag) {
        await movePosition(this.dragObj).catch(e => console.error(e))
        await this.getMap(this.id).catch(e => console.error(e))
        // 行为日志
        let logData = {
          method: this.METHOD.MODIFY,
          description: this.DESCRIPTION.SINGLE,
          referstr1: this.dragObj,
          logcontent: '拖拽岗位交换位置'
        }
        this.sendBehaviorLog(logData)
        // this.dragFlag = false
        this.$emit('update:dragFlag', false)
      }
    },
    onDragover (e) {
      e.preventDefault()
    },
    onDrop (e, index, index2) {
      // this.dragFlag = true
      this.$emit('update:dragFlag', true)
      const { sequenceId, gradeId } = this.queryId(index, index2)
      this.dragObj.toGradeId = gradeId
      this.dragObj.toSeriesId = sequenceId
    },

vue自定义元素拖动

原文：https://www.cnblogs.com/raind/p/11081325.html