vue组件的拖拽实现

Vue 组件拖拽实现方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 等事件实现拖拽功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragover.prevent
    @drop="handleDrop"
  >
    拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', 'drag-data');
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      console.log('拖拽数据:', data);
    }
  }
}
</script>

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 拖拽组件库，适合实现列表排序、拖拽等功能。

安装：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="list" @end="onDragEnd">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束，当前列表:', this.list);
    }
  }
}
</script>

使用自定义拖拽逻辑

对于更复杂的拖拽需求，可以通过自定义逻辑实现。例如，结合鼠标事件（mousedown、mousemove、mouseup）计算元素位置。

<template>
  <div 
    ref="dragElement"
    @mousedown="startDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    可拖拽元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 }
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startPos = { x: e.clientX - this.position.x, y: e.clientY - this.position.y };
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(e) {
      if (this.isDragging) {
        this.position.x = e.clientX - this.startPos.x;
        this.position.y = e.clientY - this.startPos.y;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
}
</script>

使用 Vue 指令实现拖拽

通过自定义指令封装拖拽逻辑，可以复用拖拽功能。

Vue.directive('drag', {
  bind(el, binding) {
    let isDragging = false;
    let startX, startY;

    el.addEventListener('mousedown', (e) => {
      isDragging = true;
      startX = e.clientX - el.getBoundingClientRect().left;
      startY = e.clientY - el.getBoundingClientRect().top;
      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', up);
    });

    function move(e) {
      if (isDragging) {
        el.style.left = `${e.clientX - startX}px`;
        el.style.top = `${e.clientY - startY}px`;
      }
    }

    function up() {
      isDragging = false;
      document.removeEventListener('mousemove', move);
      document.removeEventListener('mouseup', up);
    }
  }
});

使用指令：

<div v-drag style="position: absolute;">拖拽我</div>

注意事项

• 拖拽元素需要设置 position: absolute 或 position: relative 以确保定位生效。
• 使用原生拖拽 API 时，注意阻止默认事件（如 dragover 的 preventDefault）。
• 第三方库（如 vue-draggable）更适合复杂场景，如列表排序或跨组件拖拽。
• 移动端适配可能需要额外处理触摸事件（如 touchstart、touchmove）。