Vue3拖拽插件Vue.Draggable.next
vue.draggable.next 是一款vue3的拖拽插件,基于Sortable.js实现的,你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景,具体效果可见下图
如何寻找一款优雅、简洁、好用的vue3拖拽插件,笔者在开发过程中找到了这款插件,因而做一个简单分享
上手示例
需求:实现一个可拖拽列表
1.安装插件
yarn add vuedraggable@next
npm i -S vuedraggable@next
2.引入插件
import {
VueDraggableNext} from 'vue-draggable-next'
3.组件编写
<vue-draggable-next
v-model="columns" //列表数组
tag="transition-group" //标签名
handle=".row-nav"
>
<transition-group>
<a-row v-for="item in columns" :key="item.id" class="row-nav">
<div class="iconfont icon-icon_move row-nav-icon"></div>
<a-col class="row-nav-text">
<a-row class="title">{
{
item.name }}</a-row>
</a-col>
<a-switch
v-model:checked="item.checked"
class="row-switch"
size="small"
></a-switch>
</a-row>
</transition-group>
</vue-draggable-next>