如何使用 jqueryui 仅在其右侧调整左侧 div 的大小，并且它是相邻的右侧 div，仅在其左侧？

Posted 2023-05-08

【中文标题】如何使用 jqueryui 仅在其右侧调整左侧 div 的大小，并且它是相邻的右侧 div，仅在其左侧？

【英文标题】：How can I resize a left side div on its right side only, and it's neighboring right side div, on its left side only, using jqueryui?

【发布时间】：2015-06-27 13:39:08

【问题描述】：

我有两个并排的 div。我正在使用 jquery ui 来调整它们的大小。但是，我遇到了问题，因为我正在尝试使用 'alsoResize' 属性来调整它旁边的 div 的大小。

如果我调整左侧 div 的右侧大小，那么右侧 div 的左侧也应该相应地调整大小。

在“handles”旁边使用“alsoResize”不起作用，并且当我调整左侧 div 右侧的大小时，右侧 div 的右侧也会调整大小。

关于如何完成我需要做的任何建议？

jsfiddle：

https://jsfiddle.net/hh3ue3op/5/

【问题讨论】：

是的，一个小提琴，或者至少，在这里包含你的代码

@Ted 很抱歉用 jsfiddle 更新了帖子

我提供this fiddle 以供考虑......不确定这是否是预期的效果

【参考方案1】：

查看 jQuery UI .resizable() 函数的“handles”参数。 http://api.jqueryui.com/resizable/

这是取自this answer的一个很好的例子：

$( ".selector" ).resizable( handles: "n, e, s, w" );

Updated jsfiddle

【讨论】：

我已经在使用句柄了，问题是 'alsoResize' 显然会覆盖句柄。

这个解决方案的问题是我的 div 不是父级 > 子级，如果我这样做，那么子级只会与父级重叠。我需要两个 div，并排，根据彼此调整大小。但是，因为它们都显示内容，所以一个不能重叠。

我明白了。在这种情况下，这个答案似乎就是你要找的。您必须稍微修改代码，但它似乎正在做您想做的事情：***.com/questions/3369045/…

我调查了那个答案，如果你注意到它在南北方向上工作正常，但是调整东西的大小与我需要的相反。我正在搞砸它以尝试实现我所需要的，但到目前为止还没有弄清楚

谢谢！我想这会起作用，希望我能找到一些优雅的东西，但我也会为上下行为添加一些东西。感谢您找到它！