【前端】实现快速改变内容大小选择框

简言

简单实现选择框改变内容大小和位置。
在这里插入图片描述

内容

这里实现选择框改变内容大小是让内容宽高等于选择框的百分之百，当选择框大小改变时，内容也会响应的改变。
位置则是根据定位实现的。

选择框

选择框就是一个div，然后定位上下左右四条边和其余角，在定位一个移动位置的按钮，一个简单的选择框就好了。
在这里插入图片描述
然后内容就定位到中间就行，宽高等于选择框百分百（当然你也可以选择实时改变内容区域大小）。

改变对应边角等元素的鼠标指示图类型。
在这里插入图片描述
编写逻辑时，一般完整操作就是鼠标点击边-》不松手移动鼠标-》鼠标抬起。

由于边宽或高太小，在鼠标移动时容易移出去，所以，我们给html的body添加移动和抬起事件，边本身添加按下事件开启操作

在这里插入图片描述
由于有多个操作方式，所以我们定义一个全局属性来表示当前操作状态，0表示未开始操作，1-6分别表示各种操作，操作时改变宽高选择框逻辑在mousemove事件下实现。

左边和上边在拖动时，也要实时改变元素的偏移值，这样位置才不会发生改变。

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>改变大小</title>
  <style>
    body {
      width: 100vw;
      height: 100vh;
    }

    #drag_wrapper {
      position: absolute;
      top: 100px;
      left: 100px;
      padding: 2px;
      user-select: none;
    }

    .box {
      /* width: 100px;
      height: 100px; */

    }

    .box>*:first-child {

      width: 100%;
      height: 100%;
    }

    .line {
      background: linear-gradient(90deg, #000 0%, #fff 10%) repeat;
    }

    .top {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      border-top: 2px dashed #000;
      cursor: ns-resize;
    }

    .bottom {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      border-bottom: 2px dashed #000;
      cursor: ns-resize;

    }

    .right {
      position: absolute;
      top: 0px;
      right: 0px;
      height: 100%;
      border-right: 2px dashed #000;
      cursor: ew-resize;
    }

    .left {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      border-right: 2px dashed #000;
      cursor: ew-resize;
    }

    .round {
      position: absolute;
      top: -15px;
      left: calc(50% - 5px);
      width: 10px;
      height: 10px;
      background-color: #ccc;
      cursor: move;
    }

    .resize {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 6px;
      height: 6px;
      background-color: #000;
      cursor: nwse-resize;
    }

    /* table {
      width: 100%;
      height: 100%;
    } */
  </style>
</head>

<body>
  <div id="drag_wrapper">
    <div class="box">

      <table tabindex="1" class="zsk-table">
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
          <td>1-4</td>
          <td>1-5</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
          <td>2-5</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
          <td>3-5</td>
        </tr>
        <tr>
          <td>4-1</td>
          <td>4-2</td>
          <td>4-3</td>
          <td>4-4</td>
          <td>4-5</td>
        </tr>
        <tr>
          <td>5-1</td>
          <td>5-2</td>
          <td>5-3</td>
          <td>5-4</td>
          <td>5-5</td>
        </tr>
      </table>
    </div>
    <div class="line left"></div>
    <div class="line top"></div>
    <div class="line right"></div>
    <div class="line bottom"></div>
    <div class="round"></div>
    <div class="resize"></div>
  </div>
  <script>
    let drag_wrapper = document.querySelector("#drag_wrapper")
    let box = document.querySelector(".box")

    let rightD = document.querySelector(".right")
    let topD = document.querySelector(".top")
    let leftD = document.querySelector(".left")
    let bottomD = document.querySelector(".bottom")
    let moveD = document.querySelector(".round")
    let resizeD = document.querySelector(".resize")
    let state = 0
    topD.addEventListener("mousedown", (e) => {
      state = 1 // 上
    })
    rightD.addEventListener("mousedown", (e) => {
      state = 2 // 右
    })
    bottomD.addEventListener("mousedown", (e) => {
      state = 3 // 下
    })
    leftD.addEventListener("mousedown", (e) => {
      state = 4 // 左
    })
    moveD.addEventListener("mousedown", (e) => {
      state = 5 // 移动
      initX = e.clientX
      initY = e.clientY
      initLeft = drag_wrapper.offsetLeft
      initTop = drag_wrapper.offsetTop
    })
    resizeD.addEventListener("mousedown", (e) => {
      state = 6 // 同时改变宽高

    })
    let initLeft = initTop = 0, initX = initY = 0
    document.body.addEventListener("mousemove", (e) => {
      let width, height, moveX, moveY
      switch (state) {
        case 1:
          height = box.offsetHeight + drag_wrapper.offsetTop - (e.clientY - 2)
          box.style.height = height + "px"
          drag_wrapper.style.top = e.clientY - 2 + "px"
          break;
        case 2:
          width = e.clientX - drag_wrapper.offsetLeft - 2
          box.style.width = width + "px"
          break;
        case 3:
          height = e.clientY - drag_wrapper.offsetTop - 2
          box.style.height = height + "px"
          break;
        case 4:
          width = drag_wrapper.offsetLeft + box.offsetWidth - (e.clientX - 2)
          box.style.width = width + "px"
          drag_wrapper.style.left = e.clientX - 2 + "px"
          break;
        case 5:
          moveX = e.clientX - initX
          moveY = e.clientY - initY
          console.log(moveX, moveY);
          drag_wrapper.style.left = initLeft + moveX + "px"
          drag_wrapper.style.top = initTop + moveY + "px"
          break;
        case 6:
          width = e.clientX - drag_wrapper.offsetLeft - 2
          height = e.clientY - drag_wrapper.offsetTop - 2
          box.style.width = width + "px"
          box.style.height = height + "px"
          break;
        default:
          break;
      }

    })
    document.body.addEventListener("mouseup", (e) => {
      console.log(e.clientX)
      state = 0
      initX = initY = 0
      initLeft = initTop = 0
    })
  </script>
</body>

</html>