拖动鼠标调整右侧显示区的宽度

Posted 2020-10-28 薄荷凉凉凉

1、右侧的区域

2、拖动的一条竖线

3、鼠标事件

4、结合原生js和jQuery

实现如下：

（1）css代码

 *{margin: 0;padding: 0;}
 .content{
   width: 100%;
   height: 500px;
   background: #CCCCCC;
 }
  .left{
     width: 60%;
     height: 500px;
     background: green;
  }
   #right-sidebar-log{
       position: absolute;
       right: 0;
       top: 0;
       width: 40%;
       height: 500px;
       background: red;
     }
   #linetoggle{
      position: absolute;
      left: 0;
      width: 2px;
      height: 500px;
      border-left: 2px solid #000000;
      cursor: e-resize;
    }

（2）html内容

<div class="content">
     <div class="left"></div> 
     <div id="right-sidebar-log">
          <div id="linetoggle"></div>
     </div>
</div>

（3）js实现

　　function Se(id) {
        return document.getElementById(id)
    }
    window.onload = function() {
    var oBox =  Se("box"),
        oBottom = Se("right-sidebar-log"),
        oLine = Se("linetoggle");

        $("#linetoggle").on("mousedown",function (e) {
        var Cwide=$("#right-sidebar-log").width();
        var disX = (e || event).clientX;
        document.onmousemove = function(e) {
            var Cx=(e || event).clientX;
            var MoveX = disX - Cx;
            oBottom.style.width = Cwide + MoveX + "px";
            return false
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    });
   }

 （4）效果如下

拖动中间的竖线，右边的宽度会随之改变