vue自定义元素拖动

Dear 丶 2021-12-24 09:29 375阅读 0赞

#### 岗位序列拖动交换岗位 ####

<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
        },

转载于:https://www.cnblogs.com/raind/p/11081325.html