在实际开发中需要用到Collapse 折叠面板但是同时需要能够实现拖动折叠面板改变顺序的功能,我的实现方法是引用Vue.Draggable
安装
npm install vuedraggable
在需要的文件引入
import draggable from 'vuedraggable'
调用组件
element="el-collapse"表示使用的是el-collapse
<draggable v-model="bodyList" element="el-collapse">
<div v-for="item in bodyList" :key="item.id">
<el-collapse-item>
</el-collapse-item>
</div>
</draggable>
draggable 的各种事件
<!--start事件的用法-->
<template>
<div>
<!--使用draggable组件-->
<div class="itxst">
<div style="padding-left:10px">start事件例子</div>
<div class="col">
<draggable v-model="arr1" group="itxst" @start="start" animation="300">
<transition-group>
<div
:class="item.id==1?'item forbid':'item'"
v-for="item in arr1"
:key="item.id"
>{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
//注册draggable组件
components: {
draggable
},
data() {
return {
//定义要被拖拽对象的数组
arr1: [
{ id: 1, name: "www.itxst.com" },
{ id: 2, name: "www.jd.com" },
{ id: 3, name: "www.baidu.com" },
{ id: 5, name: "www.google.com" },
{ id: 4, name: "www.taobao.com" }
]
};
},
methods: {
//开始拖拽事件
start(e) {
console.log(e);
}
}
};
</script>
<style scoped>
.itxst {
margin: 10px;
text-align: left;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item2 {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: pink;
text-align: left;
}
.item2 + .item2 {
border-top: none;
margin-top: 6px;
}
.item2:hover {
outline: solid 1px #ddd;
cursor: move;
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)