vue自定义元素拖动

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

岗位序列拖动交换岗位

  1. <span
  2.             draggable="true"
  3.             @dragstart="onDragstart($event,index,index2)"
  4.             @dragend="onDragend($event)"
  5.             @dragover="onDragover($event)"
  6.             @drop="onDrop($event,index,index2)"
  7.             slot="reference"
  8.             @click="showPositonEdit(sequence,index)"
  9.             :class="['el-btn-position',sequence.showNodes.length>=2?'el-btn-position-plus':'',sequence.showItem.showPosTag?'position_tag':'']"
  10.             :style="{zIndex:sequence.showItem.highLightIndex?'6':'auto'}"
  11.             :title="sequence.showNodes.length>=2?'':sequence.showItem.positionName"
  12.           >
  13.             {
  14.     {sequence.showItem.positionName.substring(0,6)}}
  15.             <span
  16.               v-if="sequence.showNodes.length>=2 && !sequence.showItem.showPosTag"
  17.               class="icon_num"
  18.             >{
  19.     {sequence.showNodes.length}}</span>
  20.           </span>
  22. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  24. // 拖动
  25.     onDragstart (e, index, index2) {
  26.       this.tempDragObj = {}
  27.       this.dragObj.fromMapId = ''
  28.       this.dragObj.toGradeId = ''
  29.       this.dragObj.toSeriesId = ''
  30.       const { pid } = this.queryId(index, index2)
  31.       this.dragObj.fromMapId = pid
  32.     },
  33.     async onDragend (e) {
  34.       if (this.dragFlag) {
  35.         await movePosition(this.dragObj).catch(e => console.error(e))
  36.         await this.getMap(this.id).catch(e => console.error(e))
  37.         // 行为日志
  38.         let logData = {
  39.           method: this.METHOD.MODIFY,
  40.           description: this.DESCRIPTION.SINGLE,
  41.           referstr1: this.dragObj,
  42.           logcontent: '拖拽岗位交换位置'
  43.         }
  44.         this.sendBehaviorLog(logData)
  45.         // this.dragFlag = false
  46.         this.$emit('update:dragFlag', false)
  47.       }
  48.     },
  49.     onDragover (e) {
  50.       e.preventDefault()
  51.     },
  52.     onDrop (e, index, index2) {
  53.       // this.dragFlag = true
  54.       this.$emit('update:dragFlag', true)
  55.       const { sequenceId, gradeId } = this.queryId(index, index2)
  56.       this.dragObj.toGradeId = gradeId
  57.       this.dragObj.toSeriesId = sequenceId
  58.     },

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

发表评论

表情：
评论列表 （有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读