这个js代码里有两个拖动用的 div 分别是A 和B现在有点混淆在一起了怎样优化如提炼成统一可重复使用的函数以后有新的拖动div也可以直接来用上并纠正？ 获取对 floating div 和拖动栏的引用 const floatingDiv = documentgetElementByIdfloating-div; const dragBarA = documentget

可以将拖动的逻辑封装成一个函数，然后在每个拖动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); })