js 拖拽插件

// 示例代码：简单的 JavaScript 拖拽插件

// 获取需要拖拽的元素
const draggableElement = document.getElementById('draggable');

// 添加鼠标按下事件监听器
draggableElement.addEventListener('mousedown', (e) => {
    // 获取元素的初始位置
    let offsetX = e.clientX - draggableElement.offsetLeft;
    let offsetY = e.clientY - draggableElement.offsetTop;

    // 添加鼠标移动事件监听器
    const onMouseMove = (moveEvent) => {
        // 计算新的位置
        let newX = moveEvent.clientX - offsetX;
        let newY = moveEvent.clientY - offsetY;

        // 设置元素的新位置
        draggableElement.style.left = `${newX}px`;
        draggableElement.style.top = `${newY}px`;
    };

    // 添加鼠标抬起事件监听器
    const onMouseUp = () => {
        // 移除鼠标移动和抬起事件监听器
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    };

    // 监听鼠标移动和抬起事件
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    // 阻止默认行为
    e.preventDefault();
});

// 解释说明：
// 1. 通过 `mousedown` 事件监听器捕获鼠标按下事件，获取元素相对于页面的初始偏移量。
// 2. 在 `mousemove` 事件中，根据鼠标的当前位置计算出元素的新位置，并更新其样式。
// 3. 当鼠标抬起时 (`mouseup` 事件)，移除所有事件监听器以避免内存泄漏。
// 4. 使用 `preventDefault()` 方法阻止浏览器的默认行为（如选中文本等）。