当前位置：首页 > JavaScript

js实现div拖拽

2026-01-30 14:52:50JavaScript

实现 div 拖拽的基本步骤

通过 JavaScript 实现 div 拖拽功能需要监听鼠标事件（mousedown、mousemove、mouseup），并在事件触发时更新 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 的 position 设置为 absolute 或 fixed，并初始化 cursor 样式。

js实现div拖拽

#draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    cursor: grab;
    user-select: none;
}

处理边界限制

防止 div 被拖出可视区域，可以在 mousemove 事件中添加边界检查逻辑。

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const newX = e.clientX - offsetX;
    const newY = e.clientY - offsetY;
    const maxX = window.innerWidth - draggableDiv.offsetWidth;
    const maxY = window.innerHeight - draggableDiv.offsetHeight;

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

支持触摸设备

为兼容移动设备，需添加触摸事件（touchstart、touchmove、touchend）的处理逻辑。

js实现div拖拽

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

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

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

封装为可复用函数

将拖拽逻辑封装为函数，方便多个元素调用。

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

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

    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;
        element.style.cursor = 'grab';
    });
}

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

使用 HTML5 拖拽 API

HTML5 提供了原生拖拽 API，但更适合文件拖放等场景，div 拖拽推荐手动实现。

<div id="draggable" draggable="true"></div>
<script>
    document.getElementById('draggable').addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', 'drag-data');
    });
</script>