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

目錄
拖曳出方框 程式碼範例
我用純 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 達成效果