vue 实现卡片拖动

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

使用 Vue 实现卡片拖动可以通过多种方式实现，以下是几种常见的方法：

使用 HTML5 原生拖放 API

HTML5 提供了原生的拖放 API，可以通过 draggable 属性和相关事件实现拖动功能。

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

<script>
export default {
  data() {
    return {
      cards: [
        { text: 'Card 1' },
        { text: 'Card 2' },
        { text: 'Card 3' }
      ],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedIndex = index;
      event.dataTransfer.setData('text/plain', index);
    },
    handleDrop(event, index) {
      const fromIndex = this.draggedIndex;
      const toIndex = index;
      if (fromIndex !== toIndex) {
        const card = this.cards[fromIndex];
        this.cards.splice(fromIndex, 1);
        this.cards.splice(toIndex, 0, card);
      }
    }
  }
};
</script>

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

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，提供了更简单的拖放实现。

<template>
  <draggable v-model="cards" group="cards" @start="drag=true" @end="drag=false">
    <div v-for="(card, index) in cards" :key="index" class="card">
      {{ card.text }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      cards: [
        { text: 'Card 1' },
        { text: 'Card 2' },
        { text: 'Card 3' }
      ]
    };
  }
};
</script>

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

使用鼠标事件实现自定义拖动

通过监听鼠标事件，可以实现更灵活的拖动效果。

<template>
  <div
    v-for="(card, index) in cards"
    :key="index"
    class="card"
    @mousedown="startDrag($event, index)"
    @mousemove="dragCard($event, index)"
    @mouseup="stopDrag"
    :style="{
      position: 'relative',
      left: card.dragging ? card.dragX + 'px' : '0',
      top: card.dragging ? card.dragY + 'px' : '0'
    }"
  >
    {{ card.text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { text: 'Card 1', dragging: false, dragX: 0, dragY: 0 },
        { text: 'Card 2', dragging: false, dragX: 0, dragY: 0 },
        { text: 'Card 3', dragging: false, dragX: 0, dragY: 0 }
      ],
      dragStartX: 0,
      dragStartY: 0
    };
  },
  methods: {
    startDrag(event, index) {
      this.cards[index].dragging = true;
      this.dragStartX = event.clientX - this.cards[index].dragX;
      this.dragStartY = event.clientY - this.cards[index].dragY;
    },
    dragCard(event, index) {
      if (this.cards[index].dragging) {
        this.cards[index].dragX = event.clientX - this.dragStartX;
        this.cards[index].dragY = event.clientY - this.dragStartY;
      }
    },
    stopDrag() {
      this.cards.forEach(card => {
        card.dragging = false;
      });
    }
  }
};
</script>

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

注意事项

• 使用 HTML5 原生拖放 API 时，注意 dragover 事件需要调用 preventDefault 以允许放置。
• Vue.Draggable 提供了丰富的配置选项，如动画、限制拖动方向等，可以参考其文档。
• 自定义拖动实现时，注意处理鼠标事件的位置计算，确保拖动效果流畅。

以上方法可以根据具体需求选择适合的实现方式。