当前位置：首页 > VUE

vue 实现卡片拖拽

2026-01-08 08:30:06VUE

Vue 实现卡片拖拽

使用 HTML5 原生拖拽 API

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

<template>
  <div class="card" draggable="true" @dragstart="handleDragStart" @dragend="handleDragEnd">
    {{ cardContent }}
  </div>
  <div class="drop-area" @dragover.prevent @drop="handleDrop"></div>
</template>

<script>
export default {
  data() {
    return {
      cardContent: '拖拽我',
    };
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', this.cardContent);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    },
    handleDrop(e) {
      const data = e.dataTransfer.getData('text/plain');
      console.log('拖拽数据:', data);
    },
  },
};
</script>

<style>
.card {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
.drop-area {
  width: 200px;
  height: 200px;
  background: #f0f0f0;
}
</style>

使用第三方库 Vue.Draggable

Vue.Draggable 是基于 Sortable.js 的 Vue 拖拽组件，适用于列表拖拽排序。

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable v-model="cards" @end="onDragEnd">
    <div v-for="card in cards" :key="card.id" class="card">
      {{ card.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      cards: [
        { id: 1, content: '卡片1' },
        { id: 2, content: '卡片2' },
        { id: 3, content: '卡片3' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽后的顺序:', this.cards);
    },
  },
};
</script>

<style>
.card {
  width: 100px;
  height: 100px;
  background: #ccc;
  margin: 5px;
  cursor: move;
}
</style>

使用自定义拖拽逻辑

如果需要更灵活的拖拽控制，可以结合鼠标事件（mousedown、mousemove、mouseup）实现自定义拖拽。

<template>
  <div class="card" @mousedown="startDrag" :style="cardStyle">
    {{ cardContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardContent: '拖拽我',
      isDragging: false,
      offsetX: 0,
      offsetY: 0,
      posX: 0,
      posY: 0,
    };
  },
  computed: {
    cardStyle() {
      return {
        left: `${this.posX}px`,
        top: `${this.posY}px`,
      };
    },
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.offsetX = e.clientX - this.posX;
      this.offsetY = e.clientY - this.posY;
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    drag(e) {
      if (this.isDragging) {
        this.posX = e.clientX - this.offsetX;
        this.posY = e.clientY - this.offsetY;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
  },
};
</script>

<style>
.card {
  width: 100px;
  height: 100px;
  background: #ccc;
  position: absolute;
  cursor: move;
}
</style>