鼠标的拖动效果

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;
}