vue 实现卡片拖拽

Vue 实现卡片拖拽

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，结合 Vue 的事件绑定可以轻松实现卡片拖拽功能。需要监听 dragstart、dragover 和 drop 事件。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDrop(index) {
      const item = this.items[this.draggedIndex]
      this.items.splice(this.draggedIndex, 1)
      this.items.splice(index, 0, item)
    }
  }
}
</script>

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

使用第三方库 vue-draggable

对于更复杂的拖拽需求，可以使用 vue-draggable 库，它是基于 Sortable.js 的 Vue 封装，支持列表排序、跨列表拖拽等功能。

安装依赖：

npm install vuedraggable

示例代码：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>

跨列表拖拽

vue-draggable 支持多个列表之间的拖拽，只需为每个列表设置 group 属性。

<template>
  <div>
    <draggable 
      v-model="list1" 
      group="items" 
      class="list"
    >
      <div v-for="(item, index) in list1" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </draggable>

    <draggable 
      v-model="list2" 
      group="items" 
      class="list"
    >
      <div v-for="(item, index) in list2" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list1: ['Item A', 'Item B', 'Item C'],
      list2: ['Item X', 'Item Y', 'Item Z']
    }
  }
}
</script>

拖拽动画与样式优化

通过 CSS 可以为拖拽过程添加动画效果，提升用户体验。vue-draggable 提供了 ghost-class 和 chosen-class 属性来定制拖拽时的样式。

<draggable 
  v-model="items" 
  ghost-class="ghost" 
  chosen-class="chosen"
>
  <div v-for="(item, index) in items" :key="index" class="draggable-item">
    {{ item }}
  </div>
</draggable>

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.chosen {
  background: #f0f0f0;
}

自定义拖拽手柄

默认情况下，整个卡片都可以触发拖拽。如果需要指定拖拽手柄，可以在 draggable 组件中设置 handle 属性。

<draggable v-model="items" handle=".handle">
  <div v-for="(item, index) in items" :key="index" class="draggable-item">
    <span class="handle">☰</span>
    {{ item }}
  </div>
</draggable>

.handle {
  cursor: move;
  margin-right: 10px;
}

通过以上方法，可以实现灵活的卡片拖拽功能，适用于各种场景如看板、任务管理等。