最近有一個(gè)需求是需要對(duì)一些有序標(biāo)簽進(jìn)行排序 , 項(xiàng)目使用的是element-ui的vue, 由于element-ui本身并不具備拖拽功能, 因此選用了vuedraggable插件進(jìn)行實(shí)現(xiàn).
效果圖如下:
拖拽排序展示.gif
Vue.Draggable
文檔地址:https://github.com/SortableJS/Vue.Draggable
使用方法:
yarn add vuedraggable
npm i -S vuedraggable
代碼示例: (我在項(xiàng)目中的示例,使用到了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方法在拖拽結(jié)束的時(shí)候回調(diào)打印出順序,會(huì)跟隨動(dòng)作進(jìn)行重新排序
onDragEnd() {
console.log(this.form.childProject, "form.childProject");
},
