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>
是不是比较简单就实现了拖拽效果
觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧
原创文章,作者:starterknow,如若转载,请注明出处:https://www.starterknow.com/126505.html