当前位置：首页 > VUE

vue实现卡片移动

2026-02-20 07:52:21VUE

Vue 实现卡片移动的方法

使用拖拽库实现卡片移动

Vue 提供了多种拖拽库，如 vuedraggable，可以轻松实现卡片的拖拽移动。安装 vuedraggable 后，通过简单的配置即可实现卡片拖拽排序。

安装 vuedraggable：

npm install vuedraggable

示例代码：

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

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      cards: [
        { id: 1, text: 'Card 1' },
        { id: 2, text: 'Card 2' },
        { id: 3, text: 'Card 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('卡片顺序已更新');
    }
  }
};
</script>

<style>
.card {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}
</style>

使用原生 HTML5 拖拽 API

如果不依赖第三方库，可以通过 HTML5 的拖拽 API 实现卡片移动。需要监听 dragstart、dragover 和 drop 事件。

示例代码：

<template>
  <div class="card-container">
    <div 
      v-for="card in cards" 
      :key="card.id" 
      class="card" 
      draggable="true"
      @dragstart="dragStart($event, card.id)"
      @dragover.prevent
      @drop="drop($event, card.id)"
    >
      {{ card.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { id: 1, text: 'Card 1' },
        { id: 2, text: 'Card 2' },
        { id: 3, text: 'Card 3' }
      ],
      draggedCardId: null
    };
  },
  methods: {
    dragStart(event, cardId) {
      event.dataTransfer.setData('text/plain', cardId);
      this.draggedCardId = cardId;
    },
    drop(event, targetCardId) {
      const draggedCardIndex = this.cards.findIndex(card => card.id === this.draggedCardId);
      const targetCardIndex = this.cards.findIndex(card => card.id === targetCardId);

      if (draggedCardIndex !== -1 && targetCardIndex !== -1) {
        const [draggedCard] = this.cards.splice(draggedCardIndex, 1);
        this.cards.splice(targetCardIndex, 0, draggedCard);
      }
    }
  }
};
</script>

<style>
.card {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}
</style>

使用 CSS 动画增强移动效果

在卡片移动时，可以通过 CSS 过渡或动画增强用户体验。例如，为卡片添加平滑的移动效果。

示例 CSS：

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:active {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

结合 Vue Transition 实现动画

Vue 的 <transition> 组件可以为卡片移动添加更复杂的动画效果。例如，在卡片位置变化时添加淡入淡出效果。

示例代码：

<template>
  <div class="card-container">
    <transition-group name="card-move" tag="div">
      <div 
        v-for="card in cards" 
        :key="card.id" 
        class="card" 
        draggable="true"
        @dragstart="dragStart($event, card.id)"
        @dragover.prevent
        @drop="drop($event, card.id)"
      >
        {{ card.text }}
      </div>
    </transition-group>
  </div>
</template>

<style>
.card-move {
  transition: all 0.5s ease;
}
</style>