块缩放 JS 移动 - CSS

介绍

这是一个简单的技巧，用于通过JavaScript和CSS将块缩放并使其可移动。该技巧可用于创建可调整大小和可移动的面板，对于像拖放和用户界面工具的实现非常有用。

实现

下面是一个使用JavaScript和CSS实现块缩放和移动的示例代码：

<div class="block">可缩放可移动的块</div>

<script>
  let block = document.querySelector(".block");
  let isResizing = false;
  let isMoving = false;
  let lastX, lastY;
  let minWidth = 60;

  // 块缩放
  let resizeBlock = (e) => {
    if (!isResizing) return;
    block.style.width = Math.max(minWidth, e.clientX - block.offsetLeft) + "px";
  };

  // 块移动
  let moveBlock = (e) => {
    if (!isMoving) return;
    let diffX = e.clientX - lastX;
    let diffY = e.clientY - lastY;
    block.style.left = block.offsetLeft + diffX + "px";
    block.style.top = block.offsetTop + diffY + "px";
    lastX = e.clientX;
    lastY = e.clientY;
  };

  block.addEventListener("mousedown", (e) => {
    if (e.offsetX > block.offsetWidth - 10) {
      isResizing = true;
    } else {
      isMoving = true;
      lastX = e.clientX;
      lastY = e.clientY;
    }
  });

  document.addEventListener("mousemove", (e) => {
    resizeBlock(e);
    moveBlock(e);
  });

  document.addEventListener("mouseup", () => {
    isResizing = false;
    isMoving = false;
  });
</script>

<style>
  .block {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    background-color: #ddd;
    border: 1px solid #000;
    cursor: move;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .block::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #000;
    content: "";
    cursor: se-resize;
  }
</style>

解释

上述代码中，我们创建了一个div块，并通过JavaScript和CSS使其可缩放和可移动。

首先，我们需要为块中的右下角区域添加一个调整大小的手柄。在样式中，我们使用了一个::after伪元素来创建这个手柄，并为它设置了适当的样式。

然后，我们定义了一些变量来跟踪块是否正在被调整大小或移动。我们还定义了一个最小宽度，以防止用户将块调整得太小。

接下来，我们定义了两个函数来处理调整大小和移动。resizeBlock函数检查块是否正在调整大小，如果是，则将块的宽度设置为鼠标的当前位置减去块的左边缘位置，并确保宽度不小于最小宽度。

moveBlock函数检查块是否正在移动，如果是，则计算鼠标相对于上一次移动的差异，并将其添加到块的位置上。

最后，我们将mousedown事件添加到块上，以便在用户单击右下角区域时启用调整大小或按下其他位置时启用移动。我们还将mousemove事件添加到文档上，以便在用户拖动鼠标时实时调整大小或移动块。最后，我们将mouseup事件添加到文档上，以便在用户释放鼠标时停止调整大小或移动块。

结论

使用JavaScript和CSS创建可调整大小和可移动的块可以为用户界面工具和拖放操作提供非常有用的功能。通过上述示例代码，我们可以看到如何实现这一点。