vue 实现卡片拖拽

实现卡片拖拽的基本思路

在Vue中实现卡片拖拽功能通常结合HTML5的拖放API或第三方库如vuedraggable。以下是两种常见方法的详细说明：

使用HTML5原生拖放API

HTML5提供了draggable属性及相关事件（dragstart、dragend、dragover、drop等），通过监听这些事件实现拖拽逻辑。

<template>
  <div 
    class="card" 
    draggable="true"
    @dragstart="handleDragStart($event, index)"
    @dragover.prevent
    @drop="handleDrop($event, index)"
  >
    {{ card.content }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { id: 1, content: 'Card 1' },
        { id: 2, content: 'Card 2' }
      ]
    };
  },
  methods: {
    handleDragStart(e, index) {
      e.dataTransfer.setData('text/plain', index);
    },
    handleDrop(e, targetIndex) {
      const sourceIndex = e.dataTransfer.getData('text/plain');
      const [movedCard] = this.cards.splice(sourceIndex, 1);
      this.cards.splice(targetIndex, 0, movedCard);
    }
  }
};
</script>

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

关键点：

• 设置draggable="true"启用拖拽。
• @dragover.prevent阻止默认行为以允许放置。
• 通过dataTransfer传递拖拽项的索引，完成数据交换。

使用vuedraggable库

vuedraggable是基于Sortable.js的Vue组件，简化了列表拖拽的实现。

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="cards" 
    group="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: 'Card 1' },
        { id: 2, content: 'Card 2' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成后的顺序:', this.cards);
    }
  }
};
</script>

<style>
.card {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
}
</style>

优势：

• 内置动画和跨列表拖拽支持。
• 通过v-model直接绑定数据，无需手动处理DOM操作。

性能优化建议

对于大量卡片场景，为拖拽项添加key属性避免不必要的渲染。若使用原生API，可通过requestAnimationFrame优化拖拽过程中的视觉反馈。

<div v-for="card in cards" :key="card.id" class="card">
  {{ card.content }}
</div>

跨框架兼容性

若需兼容旧版浏览器，可通过polyfill（如Sortable.js）或回退到鼠标事件模拟拖拽。vuedraggable已内置兼容处理。