js鼠标拖拽实例

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

#draggable {
    cursor: move;
}

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) {
        draggable.style.left = (e.clientX - offsetX) + 'px';
        draggable.style.top = (e.clientY - offsetY) + 'px';
    }
});

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