左右拖拽改变布局大小

30 阅读1分钟

直接上html代码

根据大佬的代码进行改进

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .column {
        display: flex;
        width: 100vw;
      }
      .column-left {
        height: 400px;
        background-color: #fff;
        position: relative;
      }
      .column-right {
        flex: 1;
        height: 400px;
        background-color: #eee;
        overflow: hidden;
      }
      /* 左侧显示块 */
      .resize-save {
        position: absolute;
        top: 0;
        /* 给拖拽区域留下空间 */
        right: 5px;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
      }
      /* 在左侧显示块的下面 只占有3px宽的空间可拖动区域 */
      .resize-bar {
        width: 400px;
        min-width: 400px;
        max-width: 800px;
        height: inherit;
        /* 方向 */
        resize: horizontal;
        /* cursor: ew-resize; */
        cursor: col-resize;
        /* 让他隐藏 */
        opacity: 0;
        overflow: scroll;
      }
      /* 拖拽线 */
      .resize-line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
      }

      .resize-bar:hover ~ .resize-line,
      .resize-bar:active ~ .resize-line {
        border-right: 2px dashed rgb(73, 181, 224);
      }

      /* 设置拖动的scrollbar宽度 */
      .resize-bar::-webkit-scrollbar {
        width: 400px;
        min-width: 400px;
        max-width: 800px;
        height: inherit;
      }

      /* 针对Firefox显示右边框和右下角的16x16的拖拽块 */
      @supports (-moz-user-select: none) {
        .resize-bar:hover ~ .resize-line::after,
        .resize-bar:active ~ .resize-line::after {
          content: "";
          position: absolute;
          width: 16px;
          height: 16px;
          bottom: 0;
          right: -8px;
          /* background: url(./resize.svg); */
          background-color: red;
          background-size: 100% 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="column">
      <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
          左侧的内容,左侧的内容,左侧的内容,左侧的内容
          左侧的内容,左侧的内容,左侧的内容,左侧的内容
          左侧的内容,左侧的内容,左侧的内容,左侧的内容
          左侧的内容,左侧的内容,左侧的内容,左侧的内容
        </div>
      </div>
      <div class="column-right">
        右侧的内容,右侧的内容,右侧的内容,右侧的内容
      </div>
    </div>
  </body>
</html>

image.png