最近有一个需求是需要对一些有序标签进行排序 , 项目使用的是element-ui的vue, 由于element-ui本身并不具备拖拽功能, 因此选用了vuedraggable插件进行实现.
效果图如下:
拖拽排序展示.gif
Vue.Draggable
文档地址:https://github.com/SortableJS/Vue.Draggable
使用方法:
yarn add vuedraggable
npm i -S vuedraggable
代码示例: (我在项目中的示例,使用到了el-tag)
<draggable v-model="form.childProject" @end="onDragEnd">
<el-tag
v-for="(tag, index) in form.childProject"
:key="index"
>
{{ tag.name }}
</el-tag>
</draggable>
//方法中 onDragEnd方法在拖拽结束的时候回调打印出顺序,会跟随动作进行重新排序
onDragEnd() {
console.log(this.form.childProject, "form.childProject");
},
