Vue拖拽功能 vue-draggable-plus,支持V2和V3
文章目录
介绍 VueDraggablePlus
最近需要pc上做拖拽功能,之前在移动端使用的是Sortablejs,由于 Sortablejs 的 vue3 组件一直没有更新,已经跟 vue3 严重脱节,所以诞生了这个VueDraggablePlus项目。这次就对VueDraggablePlus的使用记录一下。
官方地址:
VueDraggablePlus官网
一、使用说明
版本支持
拖拽排序模块,支持 Vue>=v3 或 Vue >=2.7。V2和V3都是支持的大家可以放心使用。
安装
npm install vue-draggable-plus
二、使用实例
1.双列表拖拽
代码如下(示例):
<template>
<div class="flex" style="width: 600px; margin: 100px auto">
<VueDraggable
class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
v-model="list1"
animation="150"
ghostClass="ghost"
group="people"
@update="onUpdate"
@add="onAdd"
@remove="remove"
>
<div v-for="item in list1" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
{{ item.name }}
</div>
</VueDraggable>
<VueDraggable
class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
v-model="list2"
animation="150"
group="people"
ghostClass="ghost"
@update="onUpdate"
@add="onAdd"
@remove="remove"
>
<div v-for="item in list2" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
{{ item.name }}
</div>
</VueDraggable>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
const list1 = ref([
{
name: 'Joao',
id: '1',
},
{
name: 'Jean',
id: '2',
},
{
name: 'Johanna',
id: '3',
},
{
name: 'Juan',
id: '4',
},
]);
const list2 = ref(
list1.value.map(item => ({
name: `${item.name}-2`,
id: `${item.id}-2`,
})),
);
function onUpdate() {
console.log('update');
}
function onAdd() {
console.log('add');
}
function remove() {
console.log('remove');
}
</script>
代码执行效果图:
2.更多拖拽效果
以上代码只是展示了双列表拖拽,文档里面还有更多的拖拽方式可以按需尝试。
总结
使用很方便,不需要安装过多的依赖,下载即用。所以如果你想了解更多关于 Sortablejs 的信息,可以查看Sortablejs 官网。
标签:vue,name,拖拽,draggable,item,plus,id From: https://blog.csdn.net/weixin_46613448/article/details/141031215