JavaScript 拖动功能优化：将拖动逻辑封装为可复用函数

可以将拖动的逻辑封装成一个函数，然后在每个拖动div上调用该函数。优化后的代码如下：

// 获取对 floating div 的引用 const floatingDiv = document.getElementById('floating-div');

// 定义 floating div 的起始位置 let startPosX = 0; let startPosY = 0;

// 定义鼠标点击的起始位置 let startClickX = 0; let startClickY = 0;

// 定义处理拖动的函数 function handleDrag(event) { event.preventDefault(); event.stopPropagation();

// 获取浮动 div 的起始位置 startPosX = floatingDiv.offsetLeft; startPosY = floatingDiv.offsetTop;

// 获取鼠标点击的起始位置 startClickX = event.clientX; startClickY = event.clientY;

// 定义处理拖动条上的 mousemove 事件的函数 function handleMouseMove(event) { event.preventDefault(); event.stopPropagation();

// 计算 floating div 的新位置
const newPosX = startPosX + (event.clientX - startClickX);
const newPosY = startPosY + (event.clientY - startClickY);

// 设置 floating div 的位置
floatingDiv.style.left = newPosX + 'px';
floatingDiv.style.top = newPosY + 'px';

}

// 定义在拖动条上处理 mouseup 事件的函数 function handleMouseUp(event) { event.preventDefault(); event.stopPropagation();

// Remove the event listeners for mouse move and mouse up events
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);

}

// 为 mousemove 和 mouseup 事件添加事件监听器 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }

// 为每个拖曳条添加一个事件监听器，用于处理鼠标 down 事件 const dragBars = document.querySelectorAll('.drag-bar'); dragBars.forEach((dragBar) => { dragBar.addEventListener('mousedown', handleDrag); });