1、變量的設置

let isDragging = false;
let startX;
let startY；
let endX;
let endY;
let box = null;

• isDragging : 表示是否推拽
• startX、startY：表示起始坐標，相對于元素
• endX、endY：表示結束坐標，相對于元素
• box：表示要拖動的盒子

2、設置監聽事件

設置監聽事件，并初始化盒子（box）

// 為鼠標按下事件設置監聽
titleFile.addEventListener('mousedown', (e) => {box = createFileBox; // 初始化被移動的元素mouseMove(e); // 調用移動鼠標的函數
});

3、移動鼠標

• 第一次移動
  • 首先判斷是否為第一次移動，如果是第一次移動，那末直接讓初始的位置為當前鼠標的位置。
  • 然后嘗試獲取盒子的位置，并初始化。
• 非第一次移動
  • 將上一次移動的末位置作為當前的初始位置。

function mouseMove(e){isDragging = true;if(startX  === undefined || startY === undefined) {startX = e.clientX;startY = e.clientY;} else {startX = e.clientX - endX;startY = e.clientY - endY;}let ox = box.style.left;let oy = box.style.top;if(ox === '' || ox === null || oy === '' || oy === null) {box.style.left = '0px';box.style.top = '0px';}
}

3、鼠標移動事件

由于要移動的盒子時使用的相對定位，因此導致坐標不一致，鼠標是根據左上角為原點進行定位，而我的是根據初始位置的中間位置進行定位。因此需要將鼠標的坐標轉化為盒子所在坐標系的坐標。

// 鼠標移動事件
document.addEventListener('mousemove', (e) => {if (isDragging) {e.preventDefault(); // 阻止默認行為// 計算要移動的距離，即，元素元素要移動的距離endX = e.clientX - startX;endY = e.clientY - startY;box.style.left = `${endX}px`;box.style.top = `${endY}px`;}
});

4、鼠標釋放事件

// 鼠標釋放事件
document.addEventListener('mouseup', () => {isDragging = false;
});

5、清理鼠標事件

function mouseClear() {startX = undefined;startY = undefined;endX = undefined;endY = undefined;if(box !== null) {box.style.left = '0px';box.style.top = '0px';}box = null;
}