当前位置：首页 > VUE

vue实现卡片拖动

2026-02-19 03:24:40VUE

Vue 实现卡片拖动

使用 Vue 实现卡片拖动功能可以通过原生 HTML5 的拖放 API 或第三方库（如 vuedraggable）来实现。以下是两种常见方法的详细说明：

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，可以直接在 Vue 中实现卡片拖动功能。

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

<script>
export default {
  data() {
    return {
      cardContent: "拖动我",
    };
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData("text/plain", this.cardContent);
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData("text/plain");
      this.cardContent = data;
    },
  },
};
</script>

<style>
.card {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}
</style>

draggable="true"：启用元素的拖动功能。
@dragstart：拖动开始时触发，用于设置拖动的数据。
@dragover.prevent：阻止默认行为以允许放置。
@drop：放置时触发，用于处理放置逻辑。

使用 `vuedraggable` 库

vuedraggable 是基于 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: #f0f0f0;
  margin: 5px;
  border: 1px solid #ccc;
}
</style>