1. 安装插件vuedraggable
npm install vuedraggable
2. 引入插件 & 声明组件
import draggable from "vuedraggable";
...
components: {
draggable
},
data(){
return {
tags: [
{ id: 99999, key: "other", desc: "其它" }
],
}
},
methods:{
onEnd() {
const tags = [].concat(this.tags);
// 重置sort值
tags.map((item, index) => {
item.sort = index;
})
this.tags = tags;
}
}
3. 页面使用
<draggable
v-model="tags"
chosen-class="chosen"
force-fallback="true"
group="people"
animation="1000"
@start="onStart"
@end="onEnd"
>
<transition-group>
<el-tag
v-for="(tag,index) in tags"
:key="tag.key"
:type="computedType(index)"
:closable="tag.key != 'all' && tag.key != 'other'"
:disable-transitions="false"
@close="handleClose(tag)"
>{{tag.name}}</el-tag>
</transition-group>
</draggable>
根据自身需求,按需调整即可