vuedraggable实现三列拖拽

vuedraggable是一个Vue.js组件，它基于Sortable.js实现了拖放功能，可以轻松地实现拖放排序、拖拽复制、拖放组合和拖放嵌套等功能。下面是实现三列拖拽的示例代码：

<template>
  <div class="container">
    <div class="column">
      <h3>Column 1</h3>
      <draggable v-model="list1" :options="{group:{name:'people', pull:'clone', put:false}}">
        <div v-for="item in list1" :key="item.id">{{ item.name }}</div>
      </draggable>
    </div>
    <div class="column">
      <h3>Column 2</h3>
      <draggable v-model="list2" :options="{group:{name:'people', pull:false}}">
        <div v-for="item in list2" :key="item.id">{{ item.name }}</div>
      </draggable>
    </div>
    <div class="column">
      <h3>Column 3</h3>
      <draggable v-model="list3" :options="{group:{name:'people', pull:false}}">
        <div v-for="item in list3" :key="item.id">{{ item.name }}</div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        {id: 1, name: 'Alice'},
        {id: 2, name: 'Bob'},
        {id: 3, name: 'Charlie'}
      ],
      list2: [],
      list3: []
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
}
.column {
  flex: 1;
  margin-right: 20px;
}
</style>

在这个示例中，我们使用了三个div来表示三列，每一列都包含一个vuedraggable组件来实现拖放排序的功能。第一列的选项可以被拖拽到其他两列，而其他两列的选项不能被拖拽到其他列中。通过设置不同的group属性值，可以实现不同的拖放组合方式。