当前位置：首页 > JavaScript

js实现方块拖曳

2026-04-07 09:24:42JavaScript

实现方块拖曳的基本步骤

使用JavaScript实现方块的拖曳功能，可以通过监听鼠标事件来完成。以下是具体实现方法：

HTML结构

创建一个可拖曳的方块，HTML结构如下：

js实现方块拖曳

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

JavaScript逻辑

通过监听鼠标的mousedown、mousemove和mouseup事件实现拖曳功能：

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`;
});

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

CSS优化

为拖曳方块添加一些CSS样式，提升用户体验：

js实现方块拖曳

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

完整代码示例

将HTML、CSS和JavaScript整合到一个文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Box</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: grab;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="draggable"></div>

    <script>
        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`;
        });

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

注意事项

方块必须设置为position: absolute，以便通过left和top属性移动。
通过user-select: none防止拖曳时选中文本。
监听document的mousemove和mouseup事件，避免鼠标快速移动时脱离方块范围。

扩展功能

如果需要支持触摸屏设备，可以添加touchstart、touchmove和touchend事件监听：

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

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

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