vue3 draggable 点击某项置顶

要实现Vue3 Draggable的点击某项置顶的功能，你可以使用以下步骤：

1. 在你的Vue3项目中安装vuedraggable@next，命令行如下：npm i -S vuedraggable@next。

2. 在你的Vue3组件中引入vuedraggable组件，例如：import draggable from 'vuedraggable'。

3. 在你的Vue3组件中使用vuedraggable组件，并设置相关属性，例如：

<draggable v-model="list" :options="{handle:'.handle'}">
<div v-for="(item, index) in list" :key="item.id">
<div class="handle">☰</div>
<div>{{ item.name }}</div>
</div>
</draggable>

其中，v-model绑定了一个数组list，这个数组中存储了需要拖拽的项。options属性中的handle指定了拖拽的手柄，这里使用了一个自定义的handle样式。

4. 在你的Vue3组件中添加一个置顶按钮，并绑定一个点击事件，例如：

<button @click="moveToTop">置顶</button>

5. 在你的Vue3组件中添加一个moveToTop方法，用于将当前选中的项置顶，例如：

methods: {
moveToTop() {
const selected = this.list.find(item => item.selected)
if (selected) {
const index = this.list.indexOf(selected)
this.list.splice(index, 1)
this.list.unshift(selected)
}
}
}

其中，selected变量表示当前选中的项，如果存在选中的项，则将其从数组中删除，并将其添加到数组的开头，从而实现置顶的效果。