js draggable

// HTML部分
<div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">
    Drag me!
</div>

// JavaScript部分
document.addEventListener('DOMContentLoaded', function () {
    let isDragging = false;
    let offsetX, offsetY;
    const draggableElement = document.getElementById('draggable');

    // 鼠标按下事件
    draggableElement.addEventListener('mousedown', function (e) {
        isDragging = true;
        offsetX = e.clientX - draggableElement.offsetLeft;
        offsetY = e.clientY - draggableElement.offsetTop;
    });

    // 鼠标移动事件
    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            draggableElement.style.left = `${x}px`;
            draggableElement.style.top = `${y}px`;
        }
    });

    // 鼠标释放事件
    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
});

解释说明：

1. HTML部分：创建了一个 div 元素，设置了宽度、高度、背景颜色，并将其定位为绝对位置（position: absolute），以便可以通过修改其 left 和 top 样式属性来改变其位置。
2. JavaScript部分：
   • 监听 DOMContentLoaded 事件，确保 DOM 完全加载后再执行代码。
   • 添加了 mousedown、mousemove 和 mouseup 事件监听器来实现拖拽功能。
   • 当用户按下鼠标时 (mousedown)，记录当前鼠标位置与元素左上角的偏移量 (offsetX, offsetY)，并设置 isDragging 为 true。
   • 在鼠标移动 (mousemove) 时，如果 isDragging 为 true，则根据鼠标的当前位置更新元素的位置。
   • 当用户释放鼠标 (mouseup) 时，将 isDragging 设置为 false，停止拖拽。