将div元素拖动到浏览器窗口之外时，它会自动返回到窗口内的实现方案

2023-12-21 01:01:03

创建可移动的 HTML 元素：分步指南

背景

可移动元素在网页设计中广泛应用，用于创建交互式仪表板、浮动窗口和可自定义布局。掌握创建可移动元素的技术至关重要，可以增强用户体验并为您的网站增添灵活性。

步骤 1：创建 HTML 节点

旅程的第一步是创建一个 HTML 节点，它将成为您可移动的元素。这可以通过在 HTML 文档中添加一个 div 标签来实现：

<div id="draggable-div">可移动的 div 窗体</div>

步骤 2：在 Body 中添加节点

将 HTML 节点添加到网页的 body 部分，如下所示：

<body>
  <div id="draggable-div">可移动的 div 窗体</div>

  <script>
    // 在这里添加 JavaScript 代码
  </script>
</body>

步骤 3：赋予 Div 可拖动性

现在，让我们使用 JavaScript 为 div 添加可拖动功能：

const draggableDiv = document.getElementById("draggable-div");

draggableDiv.addEventListener("mousedown", (event) => {
  const startX = event.clientX;
  const startY = event.clientY;

  const offsetX = draggableDiv.offsetLeft;
  const offsetY = draggableDiv.offsetTop;

  const dragElement = (event) => {
    const newX = event.clientX - startX + offsetX;
    const newY = event.clientY - startY + offsetY;

    draggableDiv.style.left = `${newX}px`;
    draggableDiv.style.top = `${newY}px`;
  };

  document.addEventListener("mousemove", dragElement);

  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", dragElement);
  });
});

步骤 4：处理超出边界的情况

为了确保 div 不会超出浏览器窗口的边界，我们需要处理这种情况：

const draggableDiv = document.getElementById("draggable-div");

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

draggableDiv.addEventListener("mousedown", (event) => {
  // ... 其他代码

  const dragElement = (event) => {
    // ... 其他代码

    // 判断是否超出边界
    if (newX < 0) {
      newX = 0;
    } else if (newX > windowWidth - draggableDiv.offsetWidth) {
      newX = windowWidth - draggableDiv.offsetWidth;
    }
    if (newY < 0) {
      newY = 0;
    } else if (newY > windowHeight - draggableDiv.offsetHeight) {
      newY = windowHeight - draggableDiv.offsetHeight;
    }

    // 更新 div 的位置
    draggableDiv.style.left = `${newX}px`;
    draggableDiv.style.top = `${newY}px`;
  };

  // ... 其他代码
});