JS实现拖拽和拉伸的实例

 进去的页面这个样子，其中可以左右，上下移动，进行拖拽，也可以点击进行页面的隐藏

 在菜单这里加了个鼠标移入移出功能，页面是这样

* {margin: 0;padding: 0;list-style: none;}html {width: 100%;height: 100%;}/* 头部--导航栏 */.home_top {width: 100%;height: 60px;position: absolute;background-color: rgb(163, 221, 221, .5);}.imgDiv {width: 250px;height: 60px;line-height: 60px;margin-left: 20px;}.imgDiv img {width: 100%;height: 100%;}.totalButton {width: 40px;height: 40px;border-radius: 50%;color: white;font-size: 34px;font-weight: 100;line-height: 35px;text-align: center;background-color: rgb(64, 150, 209);position: relative;top: -50px;left: 250px;z-index: 100;}/* 中部内容区 */.home_foot{width: 100%;height: 91.6%;position: absolute;top:60px;}.box {     position: absolute;     width: 100%;     height: 100%;     overflow: hidden;     display: flex; } .left {     width: 20%;     height: 100%;     flex: 1;     overflow: hidden;     background-color: pink; } .line {     width: 10px;     background: lightblue;     cursor: col-resize; } .line a {     position: absolute;top: 44%;display: block;cursor: pointer;width: 10px;height: 100px;line-height: 100px;text-align: center;color: white;background-color: #666; }.right {position: relative;width: 80%;overflow: hidden;}.right div {position: absolute;width: 100%;}.top {background: green;height: 100%;overflow: hidden;}.bottom {height: 100%;overflow: hidden;background: yellow;top: 60%;margin-top: 10px;}.line_2 {top: 60%;height: 10px;overflow: hidden;background: lightblue;cursor: row-resize;display: flex;justify-content: center;align-items: center;}.line_2 span{display: block;height: 10px;width: 10px;}.line1_2, .line1_3{cursor: pointer;display: block;width: 100px;height: 10px;line-height: 10px;text-align: center;color: white;background-color: #666;}/* 菜单选项 --------------------------------------------------------------------------------- */.meue {position: absolute;top: 50px;left: 20px;width: 870px;height: 420px;z-index: 100;display: none;}.meue_top {width: 100%;height: 30px;}.meue_top ul {width: 100%;}.meue_top ul li {float: left;color: white;font-size: 14px;width: 145px;text-align: center;line-height: 30px;background-color: rgb(64, 150, 209);}.meue_foot {width: 100%;height: 390px;background-color: antiquewhite;}.meue_foot .ulTags {float: left;width: 144px;height: 100%;text-align: center;border-right: 1px solid rgb(64, 150, 209);}.meue_foot .ulTags li {cursor: pointer;padding: 10px 0;font-size: 14px;margin-left: 25px;display: flex;justify-content: flex-start;align-items: flex-start;}.meue_foot .ulTags li span {display: block;position: relative;left: -10px;}/* 菜单选项 end ---------------------------------------------------------------------------------*/
+
<
⋁⋀
监控中心
查询中心
管理中心
系统中心
大数据中心
运营中心
😎实时定位
😂轨迹回放
😋多车轨迹
😆分组监控
😅区域监控
😄实时视频
😃录像回放
😍‍视频轮询
💯录像文件
☎指令下发
👑报表查询
✌照片查询
✋监控台账
👌主动安全
👍定点查车
👋三方监管
💋信息管理
👊车辆管理
👏标注管理
✍区域管理
👣规则管理
👀费用管理
👂通知管理
👃服务管理
👅查岗企业
👄终端升级
💍公司设置
🌂账号管理
⚽日志查询
⚾在线用户
🎮操作指引
🎲设备分析
🎷数据字典
🎸整体分析
🎺大屏展示
🎻收费管理
🚲安装证明
💙安装维修
⏰保险管理
💰证件管理
let ulTags = document.getElementsByClassName('ulTags');let lis;for (let i = 0; i < ulTags.length; i++) {lis = ulTags[i].getElementsByTagName('li');for (let j = 0; j < lis.length; j++) {lis[j].onclick = function () {console.log(i, j);}}}let totalButton = document.querySelector('.totalButton');let meue = document.querySelector('.meue');function Move() {meue.style.display = 'block';}function Out() {meue.style.display = 'none';}function $(id) {     return document.getElementsByClassName(id)[0]; }var oBox = $("box"),oLeft = $("left"),oRight = $("right"),oLine = $("line"),oLine1 = $("line1");var flag = true;var wid = 0;// 左右两边的可拖拽区域oLine.onmousedown = function (e) {var disX = (e || event).clientX;var owidth = oBox.clientWidth - oLine.offsetLeft;document.onmousemove = function (e) {var iT = owidth - ((e || event).clientX - disX);var e = e || window.event;var maxT = oBox.clientWidth - oLine.offsetWidth;oLine.style.margin = 0;iT  maxT && (iT = maxT);wid = iT;oRight.style.width = iT + "px";return false};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;oLine.releaseCapture && oLine.releaseCapture()};oLine.setCapture && oLine.setCapture();return false};// 左右两边的拖拽条oLine1.onclick = function () {let wLeft = oLeft.offsetWidth;let wRight = oRight.offsetWidth;if (flag) {oRight.style.width = wRight + wLeft + 'px';oLine1.innerHTML = '>'; // 大于号} else {oRight.style.width = 80 + '%';oLine1.innerHTML = '<'; // 小于号}flag = !flag;}var iBox = $("right"),iTop = $("top"),iBottom = $("bottom"),iLine = $("line_2"),iLine1 = $("line1_2");iLine2 = $("line1_3");var flag_1 = true;var wid_1 = 0;// 上下两边的可拖拽区域iLine.onmousedown = function (e) {     var disY = (e || event).clientY;     iLine.top = iLine.offsetTop;     document.onmousemove = function (e) {  var iT = iLine.top + ((e || event).clientY - disY);  var maxT = iBox.clientHeight - iLine.offsetHeight;  iLine.style.margin = 0;  iT  maxT && (iT = maxT);  iLine.style.top = iBottom.style.top = iT + "px";  return false     };     document.onmouseup = function () {  document.onmousemove = null;  document.onmouseup = null;  iLine.releaseCapture && iLine.releaseCapture()     };     iLine.setCapture && iLine.setCapture();     return false };// 上边的图标点击事件iLine1.onclick = function () {if (flag_1) {iBottom.style.top = 98.5 + '%';iLine.style.top = 98.5 + '%';iLine1.innerHTML = '⋀';iLine2.style.display = 'none';} else {iBottom.style.top = 60 + '%';iBottom.style.marginTop = 10 + 'px';iLine.style.top = 60 + '%';iLine1.innerHTML = '⋁';iLine2.style.display = 'block';}flag_1 = !flag_1;}// 下边的图标点击事件iLine2.onclick = function () {if (flag_1) {iBottom.style.top = 0 + '%';iLine.style.top = 0 + '%';iLine2.innerHTML = '⋁';iLine1.style.display = 'none';} else {iBottom.style.top = 60 + '%';iLine.style.top = 60 + '%';iLine2.innerHTML = '⋀';iLine1.style.display = 'block';}flag_1 = !flag_1;}

笑话娱乐网站