首先看布局，因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~

1. 阐述
   （1）.content{ display:flex;} 一定要有，否则在拖拽时会出现换行的情况
   （2）resize 要相对于父级绝对定位

<template><!--	<div class="el-dialog__header">--><!--	</div>--><div ><!--搜索框--><div class="top-wrapper "><div class="search el-input el-input--suffix"><inputtype="text"autocomplete="off"placeholder="输入指标名称搜索"class="el-input__inner"/></div></div><!--中部--><div class="indicator-wrapper"><!--侧边栏   --><div class="indicator-side"><a:class="{ 'indicator-category': true, 'indicator-category-active': item.checked }"v-for="item in sideList":key="item.id"@click.prevent="categoryClick(item)"href="#!">{{ item.name }}</a></div><!--中间选择器   --><div class="indicator-body"><div class="indicator-block"v-for="item in sideList":key="item.id" :id="'chen'+ item.id"><div class="indicator-group"><span class="indicator-title">{{ item.name }} </span></div><div class="el-row"><div class="el-col el-col-8" v-for="el in item.child " :key="el.id"><el-checkbox v-model="el.checked" class="el-checkbox__input el-checkbox"><span class="el-checkbox__label">{{ el.name }}</span></el-checkbox></div></div></div></div><!--拖拽--><div class="flex "><div class="indicator-drag"><div class="indicator-content"><div class="drag-title">已选指标</div><div class="drag-sec">拖动可自定义指标顺序</div><div class="indicator-limit_low"><div class="drag-block not-allow mg2">账户名称</div></div><div class="drag-sepreate">以上指标将横向固定</div></div><div class="indicator-limit-many" style="max-height: 445px"><sectionv-draggable="[drag,{animation: 150,ghostClass: 'ghost',group: 'people',onUpdate,onAdd,onRemove}]"class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"><divv-for="item in drag":key="item.id"class="drag-block hover-class all-scroll mg2"@click="dragClick(item)">{{ item.name}}<el-icon@click="removeItem(item.id)"style="float: right;align-items: center;position: relative;top: 8px;"class="mg-icon-close close"><close/></el-icon></div></section><div class="flex justify-between"><preview-list :list="drag" /></div></div></div></div></div></div>
</template><script setup lang="ts">
import { ref } from "vue";
import { vDraggable } from "vue-draggable-plus";
import { Close } from "@element-plus/icons-vue";const sideList = ref([{id: 1,name: "基本信息",child: [{id: 1,name: "账号名称"},{id: 2,name: "账户ID"},{id: 3,name: "账户主体"}]},{id: 2,name: "财务流水",child: [{id: 1,name: "共享赠款支出（￥）"},{id: 2,name: "账户总支出"},{id: 3,name: "账户现金支出"}]},{id: 3,name: "展现数据",child: [{id: 1,name: "消耗"},{id: 2,name: "展示数"},{id: 3,name: "平均千次展现费用"}]},{id: 4,name: "转化数据",child: [{id: 1,name: "转换数"},{id: 2,name: "转换陈本"},{id: 3,name: "转换率"}]},{id: 5,name: "转化数据(计费时间)",child: [{id: 1,name: "转化数（计费时间）"},{id: 2,name: "转化成本（计费时间）"},{id: 3,name: "深度转化次数（计费时间）"}]},{id: 6,name: " APP下载数据",child: [{id: 1,name: "安卓下载开始数"},{id: 2,name: "安卓下载开始成本"},{id: 3,name: "安卓下载开始率"}]},{id: 7,name: "视频数据",child: [{id: 1,name: "播放数"},{id: 2,name: "有效播放数"},{id: 3,name: "有效播放率"}]},{id: 8,name: "落地页及门店数据",child: [{id: 1,name: "点击电话按钮"},{id: 2,name: "表单提交"},{id: 3,name: "地图搜索"}]},{id: 9,name: "附加创意",child: [{id: 1,name: "附加创意电话按钮点击"},{id: 2,name: "附加创意在线咨询点击"},{id: 3,name: "附加创意表单按钮点击"}]},{id: 10,name: "互动数据",child: [{id: 1,name: "新增关注数"},{id: 2,name: "点赞数"},{id: 3,name: "评论提交数"}]},{id: 11,name: " 直播间数据",child: [{id: 1,name: "直播间观看数"},{id: 2,name: "直播间超过1分钟观看数"},{id: 3,name: "直播间关注数"}]},{id: 12,name: "游戏行业",child: [{id: 1,name: "当日付费金额"},{id: 2,name: "当日付费ROI"},{id: 3,name: "激活24h首次付费数"}]},{id: 13,name: "线索收集",child: [{id: 1,name: "有效获客"},{id: 2,name: "乘客首次下单数"},{id: 3,name: "回访—加好友（计费时间）"}]}
]);const categoryClick = (item) => {sideList.value.forEach((el) => (el.checked = false));item.checked = !item.checked;const element = document.getElementById("chen" + item.id);if (element) {element.scrollIntoView({ behavior: "smooth" });}};const count = ref(0);const removeItem = (id) => {drag.value = drag.value.filter(item => item.id != id);};
// const domeRef = ref<HTMLElement | null>(null);
// const handleClick = (MouseEvent) => {
// 	e.preventDefault();
// };
//拖拽
const drag = ref([{id: 1,name: "账户ID"},{id: 2,name: "备注"},{id: 3,name: "项目"},{id: 4,name: "登录邮箱"},{id: 5,name: "账户余额(元)"},{id: 6,name: "消耗"},{id: 7,name: "点击率"},{id: 8,name: "深度转化成本"},{id: 9,name: "首次付费率"},{id: 10,name: "APP内访问"},{id: 11,name: "app内下单"}
]);
const dragClick = (item) => {drag.value.forEach((el) => (el.checked = false));item.checked = !item.checked;
};function onUpdate() {console.log("update");
}function onAdd() {console.log("add");
}function onRemove() {console.log("remove");
}
</script><style scoped lang="scss">
::v-deep .el-scrollbar {overflow: hidden;height: 100%;position: static !important;
}::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {background-color:  #409eff;;//border-color: var(--el-checkbox-checked-input-border-color);
}
//隐藏滚动条
::-webkit-scrollbar-thumb {border-radius: 5px;background-color: rgb(255, 255, 255, 0.2);;
}::-webkit-scrollbar {width: 10px;height: 10px;
}
//搜索框
.top-wrapper {display: flex;justify-content: flex-start;margin-bottom: 16px;
}.top-wrapper .search {width: 250px;
}.el-input {position: relative;font-size: 14px;
}.el-input__inner {-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;height: 40px;line-height: 40px;outline: 0;padding: 0 15px;transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);width: 100%;font-size: inherit;-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el-dialog .el-dialog__body .el-input .el-input__inner {padding-left: 8px;color: #333;
}.el-input .el-input__inner {height: 32px;line-height: 32px;border-radius: 2px;
}//侧边栏
.indicator-side .indicator-category {padding-left: 16px;font-size: 14px;line-height: 40px;color: #333;cursor: pointer;display: block;
}.indicator-side .indicator-category-active {color: #197afb;background-color: #d6eaff;
}//中间基本信息
.indicator-block {padding: 16px 0 0 24px;border-bottom: 1px solid #eaebec;
}.indicator-group {display: flex;justify-content: flex-start;
}.indicator-title {margin-bottom: 16px;font-weight: 700;color: #333;
}.el-checkbox__input.is-checked .el-checkbox__label{color: #409eff;
}.el-checkbox__label {color: #333;
}.el-checkbox__label,
.el-radio__label {font-size: 12px;color: #666;
}.el-checkbox__label {display: inline-block;padding-left: 1px;line-height: 19px;font-size: 12px;
}//拖拽
.indicator-drag .indicator-content {padding: 0 16px;
}.indicator-drag .drag-title {font-size: 14px;font-weight: 700;line-height: 100%;color: #333;
}.indicator-drag .drag-sec {margin: 8px 0;font-size: 12px;line-height: 100%;color: #999;
}
.indicator-drag .drag-sepreate {position: relative;margin: 16px 0 0;font-size: 12px;color: #999;text-align: center;
}.indicator-drag .indicator-limit-many {max-height: 445px;padding: 0 16px;margin-top: 16px;overflow-x: hidden;overflow-y: auto;
}.indicator-drag .mg2 {margin-bottom: 2px;
}.indicator-drag .drag-block {position: relative;height: 40px;//width: 134px;padding: 0 30px 0 36px;overflow: hidden;line-height: 40px;text-overflow: ellipsis;white-space: nowrap;background-color: #fff;border-bottom: 1px solid #e8eaec;
}.indicator-drag .drag-block .close {position: absolute;top: 13px;line-height: 100%;color: #cecece;cursor: pointer;
}//滑动条
.infinite-list {width: 160px;height: 300px;padding: 0;margin: 0;list-style: none;
}.infinite-list .infinite-list-item {display: flex;align-items: center;justify-content: center;height: 40px;padding-left: 16px;font-size: 14px;background: #409eff;margin: 10px;color: #409eff;
}.infinite-list .infinite-list-item + .list-item {margin-top: 10px;
}//中部
.indicator-wrapper {display: flex;width: 832px;height: 516px;border: 1px solid #eaebec;border-radius: 4px;}//侧边栏
.indicator-side {flex-shrink: 0;width: 160px;overflow: auto;border-right: 1px solid #eaebec;
}//选择器
.indicator-body {width: 672px;overflow: auto;scroll-behavior: smooth;
}//右边
.indicator-drag {position: absolute;top: 0;right: 0;flex-shrink: 0;width: 216px;//height: 676px;padding: 25px 0;overflow: auto;background-color: #f8f8f9;border-right: 1px solid #eaebec;
}
</style>