js实现分隔条左右拖动
Posted heshujun223
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现分隔条左右拖动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title>Demo of ACE Editor</title> <style type="text/css"> *{padding:0;margin:0;list-style:none;} body,html{height:100%;} body{padding:0 40px;} .box{position:relative;height:calc(100% - 200px);} .bar{height:100%;width:7px;background:#d6d6d6;position:absolute;z-index:1;left:250px;top:0;cursor: e-resize;opacity:0;} .bar:hover{opacity:1;} .left-part{position:absolute;left:0;width:250px;top:0;bottom:0;border:1px solid #ddd;} .right-part{position:absolute;right:0;top:0;bottom:0;width:calc(100% - 250px);} .bar:after {display: block;position: absolute;left: 0;top: 50%;margin-top: -50px;width: 7px;height: 100px;content: " ";cursor: pointer;background: url(arrow.jpg) no-repeat center;} .resetBar:after{background:none;cursor:e-resize;} </style> </head> <body> <div style="height:200px;background:red;"></div> <div class="box"> <div class="left-part" id="leftPart">左侧</div> <div id="bar" class="bar resetBar"></div> <div class="right-part" id="rightPart">右侧</div> </div> <script type="text/javascript"> var bar = document.getElementById(‘bar‘) var leftPart = document.getElementById(‘leftPart‘) var rightPart = document.getElementById(‘rightPart‘) var defaultWidth = 250 // 默认宽度 var ismove = false // 用来判断是否移动了,区分点击和移动 var startx = 0,x,oldx = defaultWidth; bar.addEventListener(‘mousedown‘, function (e) { ismove = false e.preventDefault(); startx = e.clientX function move(e) { ismove = true x = oldx + e.clientX - startx // 设置它距离左边最小值 if (x < 200) { x = 200 } bar.style.left = x+‘px‘ } function up(e) { // 如果没有移动相当于发生了点击事件 if(ismove) { leftPart.style.width = x + ‘px‘ rightPart.style.width = ‘calc(100% - ‘+ x +‘px)‘ oldx = x // 如果距离默认值,设置可以点击回到默认状态 if (x != defaultWidth && bar.classList.contains(‘resetBar‘)) { bar.classList.remove(‘resetBar‘) } } else { var top = bar.getBoundingClientRect().top // 相当于点击了箭头 if(e.clientY - top >= (bar.offsetHeight/2-50) && e.clientY - top <= (bar.offsetHeight/2+50)) { leftPart.style.width = defaultWidth + ‘px‘ rightPart.style.width = ‘calc(100% - ‘+ defaultWidth +‘px)‘ bar.style.left = defaultWidth + ‘px‘ oldx = defaultWidth bar.classList.add(‘resetBar‘) } } document.removeEventListener(‘mousemove‘,move) document.removeEventListener(‘mouseup‘,up) } document.addEventListener(‘mousemove‘, move, false) document.addEventListener(‘mouseup‘, up, false) }, false) </script> </body> </html>
以上是关于js实现分隔条左右拖动的主要内容，如果未能解决你的问题，请参考以下文章