首先运行 npm i sortablejs -S 我是^1.12.0版本
<el-scrollbar ref="scroll" class="tree-scrollbar">
<div class="per-div" :style="{background:checkedType==''?'#E9F7FF':'',color:checkedType==''?'#0270C1':''}" @click="handleNodeClick({id:'',flowName:'收藏分类'})">
<img src="../../assets/file/list/wenjian.png" style="margin-right: 6px;"/> <!-- 左侧的文件图标 -->
<span style="font-size: 14px;text-align: left;" >收藏分类</span>
<i ></i>
</div>
<div id="sorTable1" >
<div class="per-div" v-for="item in typeList" :key="item.id" :style="{background:item.id==checkedType?'#E9F7FF':'',color:item.id==checkedType?'#0270C1':''}" @click="handleNodeClick(item)">
<i class="iconfont iconwenjianjia"></i>
<span style="font-size: 14px;" :getI="item.id" :label="item.typename" class="checkRoleList">{{ item.typename.length > 16? item.typename.substring(0, 16) + "..." : item.typename}} </span>
<span
class="collect-size"
v-if="item.collectTotal && item.collectTotal!=0"
>{{item.collectTotal && item.collectTotal!=0?item.collectTotal:''}}</span>
</span>
</div>
</div>
</el-scrollbar>
<script>
import {Sortable} from 'sortablejs'
export default {
mounted() {
var el1 = document.querySelector('#sorTable1');
new Sortable(el1, {
group: 'sorTable1',
animation: 150,
// 开始拖拽的时候
onStart: function (evt) {
evt.oldIndex;
},
onEnd(end){
let checkist = [];
//前端排序
document.querySelectorAll(".checkRoleList").forEach((d,key) => {
checkist.push({
id: d.getAttribute("getI"),
name: d.getAttribute("label"),
sort: key
});
});
//调用接口传给后端保存数据
coltypeSort(checkist).then(res=>{
if(res.status===0){
}else{
this.$message.error(res.msg);
}
})
}
});
},
methods:{
handleNodeClick(data) {
this.checkedType = data.id;
},
},
data(){
return{
typeList:[{
"id": "361b64e529c540baa01b625408d3e198",
"typename": "55555555555777777777",
"createBy": "1",
"createDate": 1638947772000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "1"
},
{
"id": "9691cef80ba14148a042411c3c7b1cf4",
"typename": "哈哈哈",
"createBy": "1",
"createDate": 1638947737000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "1"
},
{
"id": "8260a7aedbf040f4a4d65b5703436c52",
"typename": "7",
"createBy": "1",
"createDate": 1638869765000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "0"
},
{
"id": "1038445f8e3a4b24816b9bc9eb8c4208",
"typename": "55",
"createBy": "1",
"createDate": 1638869746000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "0"
},
{
"id": "668c99295232492b8489d16cd4fde9f3",
"typename": "22",
"createBy": "1",
"createDate": 1638869670000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "0"
},
{
"id": "eab67a4f5e1040af9c59543efba6bbaf",
"typename": "哈哈哈",
"createBy": "1",
"createDate": 1638862401000,
"delTag": "0",
"sortNo": 0,
"collectTotal": "0"
},
{
"id": "dd99015617954f94aaed5a5748d88526",
"typename": "333",
"createBy": "1",
"createDate": 1638862401000,
"delTag": "0",
"sortNo": 1,
"collectTotal": "0"
},
{
"id": "e75d2f8f0b5b4b13bbac2e6bec8851b7",
"typename": "11111223",
"createBy": "1",
"createDate": 1638862401000,
"delTag": "0",
"sortNo": 2,
"collectTotal": "1"
},
],
checkedType:''
}
}
}
</script>
.per-div{
width: 100%;padding: 0 14px;display: flex;align-items: center;
height: 35px;
cursor: pointer;
}
.per-div:hover{
background-color: #F5F7FA!important;
}
/deep/.iconfont{
font-size: 12px;
margin-right: 4px!important;
}
.left h5 .iconfight{
float: right;
font-size: 14px;
color: #0270C1;
padding-right: 10px;
cursor: pointer;
}
.left h5 span{
font-size: 14px;
}
.el-icon-edit-outline{
color: #CCCCCC;cursor: pointer;
}
.edit-icon{
color: #1AB394!important;
}
.tagLeft i{
margin-left: 6px!important;
}
#sorTable1{
cursor: pointer;
}
.type-span{
font-size:16px;
color: #333;
padding-left: 10px;
}
.checkRoleList{
width: 250px;
text-align: left;
}
.collect-size{
background: #008DF7;
padding: 5px;
text-align: center;
line-height: 10px;
color: #fff;
border-radius: 50%;
}
.tree-scrollbar {
height: calc(100% - 50px);
/deep/ .el-scrollbar__wrap {
overflow-x: hidden;
}
}
.iconwenjianjia{
color: #fece2a;margin-right: 6px!important;
}