页面布局 拖拽中间件分开线 左右两边动态设置宽度
需求：
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>