当前位置：首页 > VUE

vue实现卡片拖动

2026-01-18 10:57:27VUE

Vue 实现卡片拖动的几种方法

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，可以在 Vue 中直接使用。通过 draggable 属性标记可拖动的元素，并监听 dragstart、dragover 和 drop 事件来实现拖放功能。

<template>
  <div 
    v-for="(item, index) in items" 
    :key="index"
    draggable="true"
    @dragstart="handleDragStart(index)"
    @dragover.prevent
    @drop="handleDrop(index)"
  >
    {{ item }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDrop(index) {
      const draggedItem = this.items[this.draggedIndex];
      this.items.splice(this.draggedIndex, 1);
      this.items.splice(index, 0, draggedItem);
    }
  }
};
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，提供了更简单的拖放实现方式。安装后可以直接在模板中使用。

npm install vuedraggable

<template>
  <draggable v-model="items" @end="onDragEnd">
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖放完成');
    }
  }
};
</script>

使用自定义拖拽逻辑

对于更复杂的拖拽需求，可以结合鼠标事件（mousedown、mousemove、mouseup）实现自定义拖拽逻辑。这种方式灵活性更高，但实现起来相对复杂。

<template>
  <div 
    v-for="(item, index) in items" 
    :key="index"
    class="draggable-item"
    @mousedown="startDrag(index, $event)"
  >
    {{ item }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      isDragging: false,
      draggedIndex: null,
      startY: 0
    };
  },
  methods: {
    startDrag(index, event) {
      this.isDragging = true;
      this.draggedIndex = index;
      this.startY = event.clientY;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (!this.isDragging) return;
      const y = event.clientY;
      const deltaY = y - this.startY;
      // 根据 deltaY 计算拖拽位置并更新 UI
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style>
.draggable-item {
  cursor: grab;
  user-select: none;
}
</style>

使用拖拽库 interact.js

interact.js 是一个轻量级的拖拽库，支持更高级的拖拽功能（如限制拖拽范围、吸附等）。结合 Vue 使用可以实现复杂的拖拽交互。

npm install interactjs

<template>
  <div 
    v-for="(item, index) in items" 
    :key="index"
    class="draggable-item"
    ref="dragItem"
  >
    {{ item }}
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  mounted() {
    interact(this.$refs.dragItem)
      .draggable({
        onmove: (event) => {
          const target = event.target;
          const x = (parseFloat(target.style.left) || 0) + event.dx;
          const y = (parseFloat(target.style.top) || 0) + event.dy;
          target.style.left = `${x}px`;
          target.style.top = `${y}px`;
        }
      });
  }
};
</script>