当前位置：首页 > JavaScript

js实现拖动元素

2026-03-16 03:21:51JavaScript

实现拖动元素的基本思路

使用JavaScript实现元素拖动主要涉及三个事件：mousedown、mousemove和mouseup。通过监听这些事件，可以计算元素的位移并更新其位置。

基本实现步骤

HTML结构需要一个可拖动的元素：

js实现拖动元素

<div id="draggable" style="width: 100px; height: 100px; background: red; 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;
});

优化拖动体验

为了防止拖动时选中文本或触发其他默认行为，可以在mousedown事件中阻止默认行为：

js实现拖动元素

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

支持触摸设备

为支持触摸屏设备，需添加touchstart、touchmove和touchend事件：

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

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

封装为可复用函数

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

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

    element.addEventListener('mousedown', (e) => {
        e.preventDefault();
        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'));

注意事项

确保拖动元素的CSS包含position: absolute或position: relative，否则offsetLeft和offsetTop可能不准确。
拖动性能优化：频繁的mousemove事件可能影响性能，可通过节流（throttle）减少事件触发频率。
边界检查：可根据需要添加边界限制，防止元素被拖出可视区域。