js 拖拽

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

// JavaScript部分
document.addEventListener('DOMContentLoaded', function() {
    var dragBox = document.getElementById('dragBox');
    var offsetX, offsetY;
    var isDragging = false;

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

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

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

解释说明：

1. HTML部分：创建一个 div 元素，设置其宽度、高度、背景颜色，并使用 position: absolute 使其可以自由移动。
2. JavaScript部分：
   • 使用 DOMContentLoaded 确保 DOM 完全加载后再执行脚本。
   • 监听 mousedown 事件，当用户在 div 上按下鼠标时，记录鼠标相对于 div 的偏移量，并将 isDragging 标志设为 true。
   • 监听 mousemove 事件，当 isDragging 为 true 时，根据鼠标的当前位置更新 div 的位置。
   • 监听 mouseup 事件，当用户松开鼠标时，将 isDragging 标志设为 false，停止拖拽。