如何解决如何使用 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";
但由于某些未知原因,它不能很好地工作:调整大小移动与鼠标移动不同步 - 鼠标光标往往越来越靠近调整大小栏的左侧。我发现我可以改用 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 举报,一经查实,本站将立刻删除。