当前位置：首页 > JavaScript

js实现div拖动

2026-01-30 10:21:54JavaScript

实现 div 拖动的基本方法

使用 JavaScript 实现 div 拖动功能，可以通过监听鼠标事件（mousedown、mousemove、mouseup）来完成。以下是核心实现逻辑：

js实现div拖动

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

let isDragging = false;
let offsetX, offsetY;

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

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

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

CSS 设置

确保 div 的定位方式为 absolute 或 fixed，并添加基础样式：

js实现div拖动

#draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #3498db;
    cursor: grab;
    user-select: none; /* 防止拖动时选中文本 */
}

优化边界限制

为防止 div 被拖出可视区域，可以添加边界检查：

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

    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;
    const maxX = window.innerWidth - draggableDiv.offsetWidth;
    const maxY = window.innerHeight - draggableDiv.offsetHeight;

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

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #draggable {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #3498db;
            cursor: grab;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="draggable"></div>

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

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

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            const maxX = window.innerWidth - draggableDiv.offsetWidth;
            const maxY = window.innerHeight - draggableDiv.offsetHeight;
            draggableDiv.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
            draggableDiv.style.top = `${Math.max(0, Math.min(y, maxY))}px`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            draggableDiv.style.cursor = 'grab';
        });
    </script>
</body>
</html>

兼容触摸设备

如需支持触摸屏设备，可以添加触摸事件：

draggableDiv.addEventListener('touchstart', (e) => {
    isDragging = true;
    const touch = e.touches[0];
    offsetX = touch.clientX - draggableDiv.getBoundingClientRect().left;
    offsetY = touch.clientY - draggableDiv.getBoundingClientRect().top;
});

document.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    const touch = e.touches[0];
    const x = touch.clientX - offsetX;
    const y = touch.clientY - offsetY;
    draggableDiv.style.left = `${x}px`;
    draggableDiv.style.top = `${y}px`;
    e.preventDefault(); // 阻止默认滚动行为
});

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