如何使用 JS 制作像 JSFiddle.com 那样可调整大小的面板？ event.movementX 的想法是什么？

问题描述

我正在尝试使用 JS 在 html 中制作动态的、可调整大小的 div。我想要像 JSFiddle.net 那样可以调整大小的面板。我不想进入jQuery resizable widgets。

我有一个带有 3 个 div 的容器。它们的 id 是：left、right 和 resize-v（垂直调整大小拉杆）。这个垂直拉杆有“mousedown”事件的监听器，激活时将监听器放在文档的“mousemove”上，这进一步提供了 mouse_event.movementX 以简单的方式计算左右 div 的大小（只需添加或子结构鼠标 X-coord增量）：

let left  = document.getElementById("left");
let right = document.getElementById("right");

left.style.width  = left.clientWidth  + event.movementX + "px";
right.style.width = right.clientWidth - event.movementX + "px";

JSFiddle code

但由于某些未知原因，它不能很好地工作：调整大小移动与鼠标移动不同步 - 鼠标光标往往越来越靠近调整大小栏的左侧。我发现我可以改用 event.pageX 并使用此类代码获得更一致的行为：

let container = document.getElementById("container");    
left.style.width  = event.pageX - 10 + "px";
right.style.width = container.clientWidth - event.pageX + 6 + "px";

JSFiddle code with event.pageX

它几乎可以正常工作（认为在调整窗口大小并且光标更改不起作用或中断时会出现伪影 - 我正在丢失 col-resize 光标并看到通常的箭头 col-resize 应该在的位置）但我很想知道为什么moveX 的行为如此奇怪，我错过了它的本质。制作像 JSFiddle 这样一致的可调整大小的面板的解决方案是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）