vue 拖拽（2）

@dragstart : 拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

@dragenter : 拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,

@dragend : 鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件

@dragover: 拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素

<template>
  <div class="box">
    <div
      v-for="(item,index) in list"
      :key="index"
      @dragstart="dragstart($event,item)"
      @dragenter="dragenter($event,item)"
      @dragend="dragend($event,item)"
      @dragover="dragover($event)"
    >{{ item.num }}
    </div>
  </div>
</template>

<script>


export default {
  name: 'Like',
  components: {},
  data() {
    return {
      list: [{ id: 1, num: 1 }, { id: 2, num: 2 }, { id: 3, num: 3 }],
      newDataItem: {},
      oldDataItem: {}
    }
  },

  methods: {
    // 移动
    dragstart(e, val) {
      this.oldDataItem = val
    },
    // 移动过程中的信息
    dragenter(e, val) {
      // console.log(val)
      this.newDataItem = val
      e.preventDefault()
    },
    // 拖拽结果操作
    dragend(e, val) {
      if (this.oldDataItem.id !== this.newDataItem.id) {
        let oldIndex = this.list.indexOf(this.oldDataItem)
        let newIndex = this.list.indexOf(this.newDataItem)
        let newItem = [...this.list]
        // 删除老节点
        newItem.splice(oldIndex, 1)
        // 新增节点
        newItem.splice(newIndex, 0, this.oldDataItem)
        this.list = [...newItem]
      }
    },
    dragover(e) {
      e.preventDefault()
    }
  }
}
</script>
<style scoped>
.box {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: honeydew;
}
</style>