码迷,mamicode.com
首页 > Web开发 > 详细

js实现分隔条左右拖动

时间:2019-10-15 19:04:42      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:aci   smo   ati   cli   opacity   func   padding   eth   edit   

<!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实现分隔条左右拖动

标签:aci   smo   ati   cli   opacity   func   padding   eth   edit   

原文地址:https://www.cnblogs.com/hesj/p/11679338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!