当前位置：首页 > JavaScript

js事件实现拖动

2026-02-02 14:12:10JavaScript

使用原生JavaScript实现元素拖动

在JavaScript中实现元素拖动功能需要监听鼠标事件并更新元素位置。以下是实现的基本步骤：

HTML结构

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

JavaScript实现

js事件实现拖动

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

使用事件委托优化多元素拖动

当页面中有多个可拖动元素时，可以使用事件委托来优化性能：

document.addEventListener('mousedown', (e) => {
    if (!e.target.classList.contains('draggable')) return;

    const draggable = e.target;
    let isDragging = true;
    const offsetX = e.clientX - draggable.offsetLeft;
    const offsetY = e.clientY - draggable.offsetTop;

    const moveHandler = (e) => {
        if (!isDragging) return;
        draggable.style.left = `${e.clientX - offsetX}px`;
        draggable.style.top = `${e.clientY - offsetY}px`;
    };

    const upHandler = () => {
        isDragging = false;
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
    };

    document.addEventListener('mousemove', moveHandler);
    document.addEventListener('mouseup', upHandler);
});

添加边界限制

防止元素被拖出可视区域：

js事件实现拖动

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

    let newX = e.clientX - offsetX;
    let newY = e.clientY - offsetY;

    // 限制在视口内
    newX = Math.max(0, Math.min(newX, window.innerWidth - draggable.offsetWidth));
    newY = Math.max(0, Math.min(newY, window.innerHeight - draggable.offsetHeight));

    draggable.style.left = `${newX}px`;
    draggable.style.top = `${newY}px`;
});

使用CSS transform优化性能

使用transform代替top/left可以获得更好的性能：

draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    const rect = draggable.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;
    draggable.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
});

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

触摸设备支持

添加触摸事件支持使拖动在移动设备上也能工作：

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

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`;
    e.preventDefault();
});

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

使用拖放API实现

HTML5提供了原生的拖放API，但需要更多设置：

draggable.setAttribute('draggable', 'true');

draggable.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', draggable.id);
    e.dataTransfer.effectAllowed = 'move';
});

document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
});

document.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const element = document.getElementById(id);
    element.style.left = `${e.clientX - element.offsetWidth/2}px`;
    element.style.top = `${e.clientY - element.offsetHeight/2}px`;
});

这些方法提供了从基础到高级的拖动实现方案，可以根据具体需求选择适合的方式。