实现9宫格拖拽效果

先遍历数据然后把拖拽事件绑定到 循环元素上面

    <div id="heads">
      <div v-for="(item, index) in list" :key="index" class="item" @drop="drop(item, $event, index)" @dragover="dragOver" @dragstart="dalogstart($event, index)" @dragend="dragend">
        <div :id="item.id" style="display: flex" draggable>
          <div class="lable">{{ item.name }}</div>
          <el-input-number v-model="item.num" :precision="2" :step="0.1" :max="10" />
        </div>
      </div>
    </div>

下面是事件的代码

这里的 dataTransfer.setData是原生自带的构造函数方法类似于本地储存的保存

在drop里面可以是getData来获取dalogstart里面保存的数据

    // 拖拽
    dalogstart(e, index) {
      e.dataTransfer.setData('start', index)
      console.log(this.parameter)
      //   e.dataTransfer.setData('now', e.target.id)
      //   e.dataTransfer.setData('last', e.target.id)
    },
    dragend(e) {},
    dragOver(e) {
      e.preventDefault()
    },
    drop(item, e, i) {
      const startIndex = Number(e.dataTransfer.getData('start'))
      if (startIndex || startIndex === 0) {
        const startVal = this.list[startIndex]
        const endVal = this.list[i]
        this.list.splice(i, 1)
        this.list.splice(i, 0, startVal)

        this.list.splice(startIndex, 1)
        this.list.splice(startIndex, 0, endVal)
        e.dataTransfer.clearData()
      }
      e.preventDefault()
      //   const data = e.dataTransfer.getData('last')
      //   //   const now = e.dataTransfer.getData('now')
      //   //   document.getElementById(now).innerHTML = e.target.innerHTML
      //   //   now.appendChild(document.getElementById(e.target.id))
      //   e.dataTransfer.setData('now', e.target.id)
      //   e.target.appendChild(document.getElementById(data))
    },

 样式在下面

<style lang="scss" scoped>
#heads {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: skyblue;
  margin-top: 50px;
  .item {
    flex: 0 0 calc((100% - 10px) / 3);
    height: 60px;
    background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }
  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }
  .lable {
    width: 150px;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>

 

最后实现的效果入下

这是改变之前的效果这是改变之后的