当前位置：首页 > JavaScript

js实现拖动div

2026-04-04 00:21:06JavaScript

实现拖动 div 的基本步骤

使用 JavaScript 实现拖动 div 的功能可以通过监听鼠标事件来完成。以下是实现的基本方法：

HTML 结构

<div id="draggable" style="width: 100px; height: 100px; background: #ccc; position: absolute;"></div>

JavaScript 代码

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - draggable.offsetLeft;
    offsetY = e.clientY - draggable.offsetTop;
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    draggable.style.left = `${e.clientX - offsetX}px`;
    draggable.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});

优化拖动体验

为了提升拖动体验，可以添加边界检查和拖动限制：

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 提升拖动效果

添加 CSS 可以提升拖动的视觉效果：

#draggable {
    cursor: grab;
    user-select: none;
}

#draggable:active {
    cursor: grabbing;
}

支持触摸设备

如果需要支持触摸设备，可以添加触摸事件监听：

draggable.addEventListener('touchstart', (e) => {
    isDragging = true;
    offsetX = e.touches[0].clientX - draggable.offsetLeft;
    offsetY = e.touches[0].clientY - draggable.offsetTop;
});

document.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    e.preventDefault();
    draggable.style.left = `${e.touches[0].clientX - offsetX}px`;
    draggable.style.top = `${e.touches[0].clientY - offsetY}px`;
});

document.addEventListener('touchend', () => {
    isDragging = false;
});

封装为可复用的函数

可以将拖动逻辑封装为函数，方便复用：

js实现拖动div

function makeDraggable(element) {
    let isDragging = false;
    let offsetX, offsetY;

    element.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - element.offsetLeft;
        offsetY = e.clientY - element.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        element.style.left = `${e.clientX - offsetX}px`;
        element.style.top = `${e.clientY - offsetY}px`;
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
}

// 使用
makeDraggable(document.getElementById('draggable'));