vue3实现鼠标拖拽图片

在 Vue3 中实现鼠标拖拽图片功能，通常会利用 HTML5 的 drag and drop API 和 Vue 自身的数据绑定和事件处理机制。以下是简单的步骤：

1. **HTML结构**：

<div class="draggable-image" v-on:dragstart="dragStart($event)" v-on:dragover="allowDrop($event)" v-on:drop="drop($event)">
  <img :src="imageSrc" @mousedown="startDragging">
</div>

在这里，`draggable-image` 需要设置 `draggable` 属性，并监听 `dragstart`, `dragover`, 和 `drop` 事件。

2. **Vue组件**：

export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg',
      isDragging: false,
    };
  },
  methods: {
    // 拖动开始
    dragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
      this.isDragging = true;
    },
    
    // 允许放下元素
    allowDrop(event) {
      if (event.preventDefault) {
        event.preventDefault(); // 取消默认行为，防止阻止浏览器默认的文件上传等
      }
      event.stopPropagation();
      this.drop(event);
    },
    
    // 图片放置
    drop(event) {
      const data = event.dataTransfer.getData('text/plain');
      if (!data || !this.$refs[data]) {
        return;
      }
      // 更新图片源到新位置
      this.imageSrc = this.$refs[data].src;
      this.isDragging = false;
    },
    
    // 开始拖动图片
    startDragging(event) {
      this.isDragging = true;
      document.body.addEventListener('mouseup', this.stopDragging);
    },
    
    // 停止拖动
    stopDragging() {
      this.isDragging = false;
      document.body.removeEventListener('mouseup', this.stopDragging);
    },
  },
};