js实现div可拖动

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

#draggableDiv {
    cursor: move; /* 改变鼠标指针为移动样式 */
}

document.addEventListener('DOMContentLoaded', (event) => {
    const div = document.getElementById('draggableDiv');
    let offsetX, offsetY;

    div.addEventListener('mousedown', (e) => {
        offsetX = e.clientX - div.offsetLeft;
        offsetY = e.clientY - div.offsetTop;
        document.addEventListener('mousemove', moveDiv);
        document.addEventListener('mouseup', stopDragging);
    });

    function moveDiv(e) {
        div.style.left = (e.clientX - offsetX) + 'px';
        div.style.top = (e.clientY - offsetY) + 'px';
    }

    function stopDragging() {
        document.removeEventListener('mousemove', moveDiv);
        document.removeEventListener('mouseup', stopDragging);
    }
});