当前位置：首页 > JavaScript

js实现拖拽方法实现

2026-04-06 15:06:52JavaScript

使用原生 JavaScript 实现拖拽功能

拖拽功能可以通过监听鼠标事件来实现，以下是完整的实现步骤：

HTML 结构

<div id="draggable" style="width: 100px; height: 100px; background: red;"></div>

JavaScript 实现

js实现拖拽方法实现

const draggable = document.getElementById('draggable');

let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - draggable.getBoundingClientRect().left;
    offsetY = e.clientY - draggable.getBoundingClientRect().top;
    draggable.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    draggable.style.left = `${e.clientX - offsetX}px`;
    draggable.style.top = `${e.clientY - offsetY}px`;
    draggable.style.position = 'absolute';
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    draggable.style.cursor = 'grab';
});

使用事件委托优化多元素拖拽

如果需要多个元素可拖拽，可以使用事件委托：

document.addEventListener('mousedown', (e) => {
    if (!e.target.classList.contains('draggable')) return;

    const draggable = e.target;
    let isDragging = true;
    let offsetX = e.clientX - draggable.getBoundingClientRect().left;
    let offsetY = e.clientY - draggable.getBoundingClientRect().top;

    const moveHandler = (e) => {
        if (!isDragging) return;
        draggable.style.left = `${e.clientX - offsetX}px`;
        draggable.style.top = `${e.clientY - offsetY}px`;
        draggable.style.position = 'absolute';
    };

    const upHandler = () => {
        isDragging = false;
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
    };

    document.addEventListener('mousemove', moveHandler);
    document.addEventListener('mouseup', upHandler);
});

添加边界限制

防止元素被拖出可视区域：

js实现拖拽方法实现

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;

    const maxX = window.innerWidth - draggable.offsetWidth;
    const maxY = window.innerHeight - draggable.offsetHeight;

    draggable.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
    draggable.style.top = `${Math.max(0, Math.min(y, maxY))}px`;
});

使用 CSS Transform 优化性能

使用 transform 代替 top/left 可以获得更好的性能：

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    draggable.style.transform = `translate(${e.clientX - offsetX}px, ${e.clientY - offsetY}px)`;
});

添加拖拽开始/结束回调

可以添加自定义事件或回调函数：

draggable.addEventListener('mousedown', (e) => {
    // 触发自定义事件
    draggable.dispatchEvent(new CustomEvent('dragstart'));
});

document.addEventListener('mouseup', () => {
    if (isDragging) {
        draggable.dispatchEvent(new CustomEvent('dragend'));
    }
    isDragging = false;
});

这些方法提供了从基础到进阶的拖拽实现方案，可以根据具体需求选择适合的方式。