鼠标的拖动效果

o独酌o2025-06-07 8:52

1、变量的设置

js 复制代码

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

isDragging : 表示是否推拽
startX、startY：表示起始坐标，相对于元素
endX、endY：表示结束坐标，相对于元素
box：表示要拖动的盒子

2、设置监听事件

设置监听事件，并初始化盒子（box）

js 复制代码

// 为鼠标按下事件设置监听
titleFile.addEventListener('mousedown', (e) => {
    box = createFileBox; // 初始化被移动的元素
    mouseMove(e); // 调用移动鼠标的函数
});

3、移动鼠标

第一次移动
- 首先判断是否为第一次移动，如果是第一次移动，那末直接让初始的位置为当前鼠标的位置。
- 然后尝试获取盒子的位置，并初始化。
非第一次移动
- 将上一次移动的末位置作为当前的初始位置。

js 复制代码

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、鼠标移动事件

由于要移动的盒子时使用的相对定位，因此导致坐标不一致，鼠标是根据左上角为原点进行定位，而我的是根据初始位置的中间位置进行定位。因此需要将鼠标的坐标转化为盒子所在坐标系的坐标。

js 复制代码

// 鼠标移动事件
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、鼠标释放事件

js 复制代码

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

5、清理鼠标事件

js 复制代码

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