【实例】调整区域大小&动态隐藏区域

奋飛

发布于 2019-08-14 18:06:08

1.7K0

发布于 2019-08-14 18:06:08

文章被收录于专栏：Super 前端 Super 前端Super 前端

CSS布局相关及Flex详解，提及到使用Flex来完成一侧固定大小，另一随浏览器大小自动缩放。今天开发中，有这样一个需求，在两块内容中间增加一条线，然后拖拽线，可以自动调整两侧区域。

实例：调整区域大小

实例参照地址：https://jsfiddle.net/381510688/fb6Lz9rm/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拽</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .main {
            display: flex;
        }

        .main .main-left {
            width: 180px; 
            flex-basis: 180px; /*最左侧区域固定为180px*/
            flex-shrink: 0;    /*不进行缩放*/
            border: 1px solid;
        }

        .main .main-right {
            display: flex;
            align-items: center;
            height: 500px;
            width: 100%;
            min-width: 1280px;
            border: 3px solid red;
        }

        .main .main-right .left {
            position: relative;
            min-width: 300px;
            height: 80%;
            background-color: #00d6b2;
        }

        .main .main-right .left .line {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 5px;
            z-index: 1;
            cursor: ew-resize;
        }

        .main .main-right .right {
            flex-grow: 1;   /*缩放*/
            min-width: 300px;
            height: 80%;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="main-left"></div>

        <div class="main-right" id="box">
            <div class="left">
                <div class="line" onmousedown="dragLine(event)"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>


    <script>
        function dragLine(e) {
          let isResize = false
          // 鼠标指针向对于浏览器页面（或客户区）的水平坐标
          let posX = e.clientX

          let leftDom = document.querySelector('.left')
          // 返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值
          // 这里相当于box的border
          let offsetL = leftDom.offsetLeft
          let width = leftDom.offsetWidth

          // 当前点击位置 + 滚动条
          // offsetL .left元素距离浏览器左侧边缘的距离
          // e.pageX === posX + getScrollLeft()
          if (e.pageX > (offsetL + width - 10)) {
            isResize = true
          }

          let container = document.querySelector('.main-right')
          container.onmousemove = throttle(function (e) {
            if (isResize) {
              leftDom.style.width = width + (e.clientX - posX) + 'px'
            }
          }, 16)
          container.onmouseup = function () {
            container.onmousemove = null
            container.onmouseup = null
          }
        }

        // 滚动条左侧宽度
        function getScrollLeft() {
          var scrollLeft = 0;
          if(document.documentElement && document.documentElement.scrollLeft) {
            scrollLeft = document.documentElement.scrollLeft;
          } else if(document.body) {
            scrollLeft = document.body.scrollLeft;
          }
          return scrollLeft;
        }

        // 节流 参考地址 http://blog.csdn.net/ligang2585116/article/details/75003436
        function throttle(func, wait, options) {
          var context, args, result;
          var timeout = null;
          var previous = 0;
          if (!options) options = {};
          var later = function() {
            previous = options.leading === false ? 0 : new Date().getTime();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          };
          return function() {
            var now = new Date().getTime();
            if (!previous && options.leading === false) previous = now;
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
              if (timeout) {
                clearTimeout(timeout);
                timeout = null;
              }
              previous = now;
              result = func.apply(context, args);
              if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
              timeout = setTimeout(later, remaining);
            }
            return result;
          };
        }
    </script>
</body>
</html>

关于节流函数请查看：http://blog.csdn.net/ligang2585116/article/details/75003436

注意几个问题：

可拖拽的线放到左侧区域或者右侧区域这样便于计算，降低了难度；
width: 5px;增大拖拽区域，便于用户操作，提高良好的交互性；

操作处为两个扩展屏幕，操作在右侧屏幕（左侧屏幕分辨率为1440px*900px），鼠标点击点位于可操作区域左边界2px（e.offsetX）

MouseEvent

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

MouseEvent属性	说明	实例值
clientX、clientY	设置或获取鼠标指针位置相对于窗口客户区域的 X、Y 坐标（不包括滚动条）	106+3+300-5+2=406
offsetX、offsetY	设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标	2
pageX、pageY	（只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条）	74+106+3+300-5+2=480
screenX、screenY	设置或获取获取鼠标指针位置相对于用户屏幕的X、Y坐标	1440+clientX=1846
x、y	clientX、clientY的别名	与clientX相等

Element

Element（元素）接口是 Document的一个对象. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口，而 SVGElement 接口是所有SVG元素的基本接口.

Element属性	说明	实例值
clientHeight、clientWidth	（只读）该元素它内部的宽度、宽度	300（border-box）
clientTop、clientLeft	（只读）该元素距离它左边界的宽度、宽度	0
scrollHeight、scrollWidth	（只读，整数）包括由于溢出导致的视图中不可见内容	300
scrollLeft、scrollTop	读取或设置元素滚动条到元素左边、顶部的距离	0（内部无滚动条）

- clientHeight：可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight：返回整数，如果需要小数使用 Element.getBoundingClientRect().

HTMLElement

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.

HTMLElement属性	说明	实例值
offsetHeight、offsetWidth	（只读，整数）该元素自身可视高度、宽度加上上下border的宽度	300
offsetLeft、offsetTop	该元素左上角相对于 HTMLElement.offsetParent 节点的左边界、顶部偏移的像素值	180+3=183