页面布局拖拽中间件分开线左右两边动态设置宽度

需求：
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>鼠标移动事件.</title>
  6     <style type="text/css">
  7         .wrap{
  8             border:1px solid red;
  9             width: 800px;
 10             margin: 0 auto;
 11             height:500px;
 12             padding: 15px;
 13             
 14             display:flex;
 15             justify-content: space-between;
 16         }
 17         .left {
 18             border:1px solid blue; 
 19         }
 20         .middle {
 21             border: 1px solid grey; 
 22             text-align: center;
 23             line-height: 500px;
 24         }
 25         .middle span:hover {
 26             cursor: w-resize;
 27         }
 28         .right{
 29             border: 1px solid blue; 
 30         }
 31         
 32     </style>
 33     
 34     <script type="text/javascript">
 35         initLayout = function() {
 36             console.log('--->>> 初始化加载..');
 37             console.log(event);
 38              
 39             
 40             var ll = document.getElementById("leftLayout");
 41             var lm = document.getElementById("middleLayout");
 42             var lr = document.getElementById("rightLayout");
 43             
 44             console.log(' 左侧元素 --->>>', ll);
 45             console.log(' 中间元素 --->>>', lm);
 46             console.log(' 右侧元素 --->>>', lr);
 47             
 48             lm.onmousedown = function(evd) {
 49                 
 50                 var lw = parseInt(ll.style.width); 
 51                 var mw = parseInt(lm.style.width);
 52                 var rw = parseInt(lr.style.width);
 53                 
 54                 // lm.style.cursor = "w-resize"
 55                 var evd = evd || event; 
 56                 
 57                 var mouseDownX = evd.clientX;
 58                 var mouseDownOffsetX = evd.offsetX;
 59                 console.log('--->>>鼠标按下的ev：', evd);
 60                 console.log('--->>> 鼠标按下的X轴：', mouseDownX);
 61                 
 62                 document.onmousemove = function(ev) {
 63                     
 64                     var ev = ev || event;
 65                     console.log('--->>> 鼠标移动产生的ev：', ev);
 66                     console.log('--->>> 鼠标移动的X轴：', ev.clientX);
 67                     
 68                     var maxRW = parseInt(mouseDownX) + rw
 69                     var maxLW = parseInt(mouseDownX) - lw
 70                     var evCMX = parseInt(ev.clientX)
 71                     // if(parseInt(ev.clientX) > 0 && parseInt(ev.clientX) < maxW) {
 72                         
 73                     var lmw = lw + (evCMX - parseInt(mouseDownX)) 
 74                     var rmw = rw + (parseInt(mouseDownX) - evCMX) 
 75                     
 76                     console.log(' 左侧宽度 --->>> ', lmw);
 77                     console.log(' 右侧宽度 --->>> ', rmw);
 78                     document.getElementById("ls").innerHTML = lmw;
 79                     document.getElementById("rs").innerHTML = rmw;
 80                     
 81                     // 当出现负数时 or 超过允许的最大宽度时，不进行赋值
 82                     if(lmw > 0 && rmw > 0 && evCMX > maxLW && evCMX < maxRW) {
 83                         console.log('---->>> 重置宽度.');
 84                         ll.style.width = lmw + "px";
 85                         lr.style.width = rmw + "px";
 86                     }
 87                 }
 88                 
 89                 document.onmouseup = function(ev) {
 90                     document.onmousemove = null;
 91                 }
 92                  
 93             }
 94             
 95             
 96         }
 97     </script>
 98 </head>
 99 
100 <body onload="initLayout();">
101 
102     <div class="wrap">
103         <div class="left" style="width:200px;" id="leftLayout">
104             默认宽度:200px
105             <div>移动实时宽度：<span id="ls"></span>px</div>
106         </div>
107         <div class="middle" id="middleLayout" style="width:20px"><span>|||</span></div>
108         <div class="right" style="width:570px;" id="rightLayout">
109             默认宽度:670px
110             <div>移动实时宽度：<span id="rs"></span>px</div>
111         </div>
112     </div>
113 
114 </body>
115 </html>
posted @ 2019-12-31 16:21 公子缘阅读(590) 评论(0) 编辑收藏举报
刷新页面返回顶部
页面布局 拖拽中间件分开线 左右两边动态设置宽度

页面布局 拖拽中间件分开线 左右两边动态设置宽度

页面布局拖拽中间件分开线左右两边动态设置宽度

页面布局拖拽中间件分开线左右两边动态设置宽度
