当前位置：首页 > JavaScript

js实现div拖拽

2026-03-01 05:57:00JavaScript

实现div拖拽的基本方法

使用JavaScript实现div拖拽功能主要依赖于鼠标事件监听和元素位置更新。以下是核心实现步骤：

HTML结构

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

优化拖拽体验

添加边界限制防止元素被拖出可视区域：

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改善拖拽效果

添加过渡效果使拖动更平滑：

#draggable {
    transition: transform 0.1s ease;
    cursor: grab;
    user-select: none;
}

#draggable:active {
    cursor: grabbing;
}

高级实现：使用transform替代top/left

性能更优的实现方式：

let posX = 0, posY = 0;
let mouseX = 0, mouseY = 0;

draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    mouseX = e.clientX;
    mouseY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - mouseX;
    const dy = e.clientY - mouseY;
    mouseX = e.clientX;
    mouseY = e.clientY;
    posX += dx;
    posY += dy;
    draggable.style.transform = `translate(${posX}px, ${posY}px)`;
});

拖拽事件扩展

添加自定义拖拽事件回调：

const callbacks = {
    onDragStart: () => console.log('拖拽开始'),
    onDragEnd: () => console.log('拖拽结束')
};

draggable.addEventListener('mousedown', (e) => {
    callbacks.onDragStart();
    // ...原有代码
});

document.addEventListener('mouseup', () => {
    if (isDragging) callbacks.onDragEnd();
    isDragging = false;
});

js实现div拖拽