pc端列表实现拖动，变换位置

首先运行 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;
}