[JS筆記]滑鼠游標拖曳出方框，最簡單的寫法 3 分鐘完成

滑鼠游標拖曳出方框最簡單的寫法，這次要製作的功能是當使用者按住滑鼠左鍵不放，開始拖曳時，會出現跟著游標而不斷改變形狀的方框，使用者放開時才消失。

拖曳出方框 程式碼範例

我用純 JS 撰寫，開一個全新專案來放，程式碼比較乾淨簡潔：

HTML：

<div id="drag-box"></div>

CSS：

#drag-box {
  position: absolute;
  background-color: #3399ff;
  border: 1px solid black;
  display: none;
}

JS：

// 拖曳的區塊
const dragBox = document.getElementById("drag-box");

let isDragging = false; // 偵測是否正在拖曳
let startX, startY; // 拖曳起始位置

// 滑鼠按下
document.addEventListener("mousedown", (event) => {
  console.log(event);
  if (event.button === 0) {
    // 只响应鼠标左键
    startX = event.clientX;
    startY = event.clientY;
    isDragging = true;
    dragBox.style.left = startX + "px";
    dragBox.style.top = startY + "px";
    dragBox.style.width = "0";
    dragBox.style.height = "0";
    dragBox.style.display = "block";
  }
});

// 滑鼠移動時，變更拖曳範圍大小
document.addEventListener("mousemove", (event) => {
  if (isDragging) {
    const currentX = event.clientX;
    const currentY = event.clientY;
    const width = Math.abs(currentX - startX);
    const height = Math.abs(currentY - startY);
    dragBox.style.width = width + "px";
    dragBox.style.height = height + "px";
    dragBox.style.left = Math.min(currentX, startX) + "px";
    dragBox.style.top = Math.min(currentY, startY) + "px";
  }
});

// 滑鼠放開
document.addEventListener("mouseup", (event) => {
  if (event.button === 0 && isDragging) {
    isDragging = false;
    dragBox.style.display = "none";
    const releaseX = event.clientX;
    const releaseY = event.clientY;
    const width = Math.abs(releaseX - startX);
    const height = Math.abs(releaseY - startY);
    const left = Math.min(releaseX, startX);
    const top = Math.min(releaseY, startY);
    console.log("拖曳四方型:");
    console.log("左上角錨點:", left, top);
    console.log("寬度:", width);
    console.log("高度:", height);
  }
});

codepen 範例

這是我放在 codepen 的範例，可以上去直接操作看看效果~

總結

以上就是透過游標按住拖曳，產生的四方形效果。

---

為你推薦：

• [JS筆記]前端 JS 圖片預加載 3 行完成！最簡單的前端緩存方式
• [JS筆記]直接觸發 addEventListener 的方法 dispatchEvent()
• [JS筆記]JavaScript 陣列移除重複的方法，使用 Set 達成效果

---