javascript - 使用 js/jquery 通过中间的句柄并排调整两个 div 的大小

Question

不幸的是我不知道正确的术语，但每个人都看到过这个功能:有两个并排的div容器，在它们中间有一条垂直线；通过向左拖动线，左侧 div 的宽度缩小，而右侧 div 的宽度相应地增加到 handle 的位置，反之亦然。我如何在 javascript 或更好的 jQuery 中完成此操作？

作为来自另一个上下文的说明，这是用户界面的两个屏幕截图:

Answer 1

这是 JavaScript 的链接:http://methvin.com/splitter/

关于右侧的框，您只需要使用 CSS。您需要向左加载所有元素并设置最小和最大宽度:

.elements { float:left; max-width: 100px; min-width: 50px; }

您的最大尺寸需要是最小尺寸的两倍，以免有时侧面出现奇怪的空间。