vue 对div进行拖动，并改变元素位置、顺序

html

<el-form-item label="参数：" props="stepParameters">
          <div style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: stretch;"

               draggable="true"
               @dragstart="parametersDragStart($event, {...item,index})"
               @dragover.prevent="parametersDragOver($event, {...item,index})"
               @dragenter="parametersDragEnter($event, {...item,index})"
               @dragend="parametersDragEnd($event, {...item,index})"

               v-for="(item,index) in stepParameters" :key="index">
            <el-col :xs="10" :sm="10" :md="10" :lg="6" :xl="6">
              <el-input size="small" v-model="item.name" placeholder="请输入名称" :disabled="isDisabled"/>
            </el-col>
            <el-col :xs="14" :sm="14" :md="14" :lg="10" :xl="10">
              <el-input size="large" v-model="item.value" type="textarea" maxlength="1000" :rows="1"
                        :disabled="isDisabled"  placeholder="请输入参数值"/>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="2" :xl="2">
              <el-button size="mini" type="danger" @click.prevent="removeParameters(index)" icon="el-icon-delete"
                         :disabled="isDisabled" circle/>
            </el-col>
          </div>
          <div style="
              display: flex;
justify-content: center;
margin-top: 10px;
width: 50%;">
            <el-button title="添加" size="mini"
                       :disabled="isDisabled"
                       icon="el-icon-circle-plus-outline"
                       @click.stop="addParameters"
                       circle></el-button>
          </div>
        </el-form-item>

 js

  parametersDragStart(event, item) {
      this.layerY = event.layerY
      console.log("parametersDragStart", event.layerY, item)
    },
    parametersDragOver(event, item) {
      this.nowLayerY = event.layerY
      this.alter(event, item)
      console.log("parametersDragOver", event.layerY, this.nowLayerY)
    },
    parametersDragEnter(event, item) {
      console.log("parametersDragEnter", event.layerY, item)
    },
    /*拖动改变顺序*/
    parametersDragEnd(event, item) {
      this.nowLayerY = event.layerY
      this.alter(event, item)
    },


    /*变更*/
    alter: Debounce(function (event, item) {

      /*拖拉距离差 像素*/
      let difference = (this.nowLayerY - this.layerY)
      let discuss = parseInt(difference / 40)
      if (discuss > this.stepParameters.length) {
        discuss = this.stepParameters.length
      }
      // console.log("商", discuss)
      // console.log("parametersDragEnd", event.layerY, item)
      // console.log("差", (this.nowLayerY - this.layerY), item)
      if (difference > 40) {
        // console.log("大于40", (this.nowLayerY - this.layerY), item)
        this.stepParameters.splice(item.index, 1)
        this.stepParameters.splice((item.index + discuss), 0, item);
      }
      if (difference < -40) {
        let cha = item.index - Math.abs(discuss)
        if (cha < 0) {
          cha = 0
        }
        // console.log("大于-40",cha)
        this.stepParameters.splice(item.index, 1)
        this.stepParameters.splice(cha, 0, item);
      }

    }, 50),

    /**
     * 添加参数
     */
    addParameters() {
      this.stepParameters.push({name: '', value: ''})
    },
    /**
     * 删除参数
     */
    removeParameters(index) {
      this.stepParameters.splice(index, 1)
    },




/*防抖*/
Debounce (fn, t) {
	const delay = t || 500
	let timer
	return function() {
		const args = arguments
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			timer = null
			fn.apply(this, args)
		}, delay)
	}
}

效果图：