当前位置：首页 > JavaScript

js 实现拖拽

2026-02-02 11:14:29JavaScript

实现拖拽功能

在JavaScript中实现拖拽功能可以通过HTML5的拖拽API或自定义事件监听来实现。以下是两种常见的方法：

使用HTML5拖拽API

HTML5提供了原生的拖拽支持，通过draggable属性和相关事件实现。

<div id="dragElement" draggable="true">拖拽我</div>

const dragElement = document.getElementById('dragElement');

dragElement.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
});

document.addEventListener('dragover', (e) => {
    e.preventDefault(); // 允许放置
});

document.addEventListener('drop', (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    const element = document.getElementById(data);
    e.target.appendChild(element);
});

自定义拖拽实现

通过监听鼠标事件（mousedown、mousemove、mouseup）实现拖拽效果。

<div id="dragElement" style="position: absolute;">拖拽我</div>

const dragElement = document.getElementById('dragElement');
let isDragging = false;
let offsetX, offsetY;

dragElement.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - dragElement.getBoundingClientRect().left;
    offsetY = e.clientY - dragElement.getBoundingClientRect().top;
    dragElement.style.cursor = 'grabbing';
});

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

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