vuedraggable 卡片拖拽

vuedraggable是一个Vue.js组件，它提供了一个可拖拽列表的功能。下面是一个简单的例子，演示如何使用vuedraggable实现卡片拖拽：

1. 首先，安装vuedraggable：

npm install vuedraggable

2. 在Vue组件中引入vuedraggable：

import draggable from 'vuedraggable'

3. 在Vue组件中使用vuedraggable：

<draggable v-model="cards">
  <div v-for="card in cards" :key="card.id">{{ card.title }}</div>
</draggable>

在上面的代码中，我们使用v-model指令将卡片列表绑定到Vue实例的cards属性上。然后，我们使用v-for指令遍历cards数组，并将每个卡片的标题显示在页面上。

4. 最后，在Vue实例中定义cards数组：

data() {
  return {
    cards: [
      { id: 1, title: 'Card 1' },
      { id: 2, title: 'Card 2' },
      { id: 3, title: 'Card 3' },
      { id: 4, title: 'Card 4' },
      { id: 5, title: 'Card 5' }
    ]
  }
}

在上面的代码中，我们定义了一个包含5个卡片的数组。