vue可视化布局拖拽：Vue3拖拽插件vue.draggable入门教程
vue可视化布局拖拽：Vue3拖拽插件vue.draggable入门教程觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
简介vue.draggable.next是一款Vue3支持拖放的插件，并且拖放完后会与数据自动同步
// github官方地址
https://github.com/SortableJS/vue.draggable.next
效果展示
特点- 基于 Sortable.js 封装
- 完全支持PC端和移动端
- 支持不同列表之间的拖放
- 没有 jQuery 依赖
- 列表变化和数据同步
- 兼容 Vue.js 3.0
- 支持取消动作
- 各种监听事件提供
npm i -S vuedraggable@next使用
// v-model是一个数组
// item就是数组的其中一项
// item-key唯一性，一般为子项其中的一个唯一属性
// @start开始拖动事件
// @end结束拖动事件
<draggable
v-model="myArray"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
import draggable from 'vuedraggable'
export default {
components: {
draggable
}
data() {
return {
myArray:[
{
"id":1
"name:"张三"
}
{
"id":2
"name:"李四"
}
{
"id":3
"name:"王五"
}
]
drag: false
}
}
}
如果你想要动画效果的话，加上一个tag属性，值为transition-group，component-data为过渡的名字
<draggable
v-model="myArray"
tag="transition-group"
:component-data="{ name: 'fade' }"
item-key="id"
>
<template #item="{ element }">
<div>{{ element.name }}</div>
</template>
</draggable>
是不是比较简单就实现了拖拽效果
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
