当前位置：首页 > JavaScript

js实现自动拖拽

2026-03-16 03:43:00JavaScript

实现自动拖拽的基本思路

使用JavaScript实现自动拖拽功能需要监听鼠标事件（mousedown、mousemove、mouseup），并通过计算鼠标位移来更新元素位置。以下是核心步骤：

监听鼠标按下事件

在目标元素上绑定mousedown事件，记录初始位置和鼠标按下时的坐标：

element.addEventListener('mousedown', function(e) {
    // 记录初始位置
    const startX = e.clientX;
    const startY = e.clientY;
    const elementX = element.offsetLeft;
    const elementY = element.offsetTop;

    // 后续逻辑...
});

计算位移并更新元素位置

在mousemove事件中，计算鼠标移动的偏移量，并更新元素的位置：

function onMouseMove(e) {
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    element.style.left = `${elementX + dx}px`;
    element.style.top = `${elementY + dy}px`;
}

document.addEventListener('mousemove', onMouseMove);

清除事件监听

在mouseup事件中移除mousemove和mouseup的监听，结束拖拽：

js实现自动拖拽

function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
}

document.addEventListener('mouseup', onMouseUp);

完整代码示例

<!DOCTYPE html>
<html>
<head>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background: #3498db;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="draggable"></div>
    <script>
        const element = document.getElementById('draggable');
        let startX, startY, elementX, elementY;

        element.addEventListener('mousedown', function(e) {
            startX = e.clientX;
            startY = e.clientY;
            elementX = element.offsetLeft;
            elementY = element.offsetTop;

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });

        function onMouseMove(e) {
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            element.style.left = `${elementX + dx}px`;
            element.style.top = `${elementY + dy}px`;
        }

        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    </script>
</body>
</html>