js drag

// 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 isDragging = false;
    var offsetX, offsetY;

    // 鼠标按下事件
    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 完全加载后再执行脚本。
   • 获取要拖动的元素 dragBox。
   • 定义了三个变量：isDragging 用于标记是否正在拖动，offsetX 和 offsetY 用于存储鼠标相对于元素左上角的偏移量。
   • mousedown 事件：当鼠标在 dragBox 上按下时，设置 isDragging 为 true，并计算鼠标点击位置相对于元素左上角的偏移量。
   • mousemove 事件：当鼠标移动时，如果 isDragging 为 true，则更新元素的位置，使其跟随鼠标移动。
   • mouseup 事件：当鼠标释放时，设置 isDragging 为 false，停止拖动。