vue2 图片拖拽时，e.clientX与e.clientY有1秒会变成0

【文心一言提供的参考】

在Vue中，你可以使用@dragover.prevent来阻止拖拽事件的默认行为。这是一个常见的需求，尤其是在你想要创建可拖拽排序的列表时。

以下是一个简单的例子，演示如何在Vue中使用dragover.prevent：

<template>
  <div>
    <ul
      @dragover.prevent="handleDragOver"
      @drop.prevent="handleDrop"
      style="border: 1px solid #ccc; padding: 10px; width: 300px;"
    >
      <li
        v-for="(item, index) in items"
        :key="index"
        draggable
        @dragstart="handleDragStart"
        style="margin: 5px; padding: 5px; border: 1px dashed #ccc; cursor: move;"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedItem: null,
      draggedIndex: null,
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      this.draggedIndex = this.items.indexOf(item);
    },
    handleDragOver(event) {
      // 可以在这里添加自定义样式以指示可以放置
    },
    handleDrop(event) {
      const dropIndex = Array.from(event.target.parentNode.children).indexOf(event.target);
      const newItems = [...this.items];
      newItems.splice(dropIndex, 0, newItems.splice(this.draggedIndex, 1)[0]);
      this.items = newItems;
    }
  }
};
</script>

在这个例子中，我们有一个可拖动列表项的ul元素，每个li元素都是可拖动的。我们使用dragstart事件来记录拖动的项和索引，使用dragover.prevent来阻止默认的拖拽放置行为，并在drop事件中处理项的移动。这样就可以创建一个可拖拽排序的列表了。

---

【实际使用】

根据以上参考，添加了这句 @dragover.prevent="handlerDrag"

<div class="img-item" 
:style="imgItem" 

...

@dragover.prevent="handlerDrag">