防止jQuery UI可resize的元素覆盖另一个元素？

有没有办法约束元素的大小调整，以便你不能覆盖另一个元素？ 我知道你可以将包含设置为父元素，但在这里我只想阻止用户阻碍另一个兄弟元素的视图。

如果调整左侧对话框的大小，我希望插件阻止用户覆盖右侧的对话框：

Answer 1

jQuery UI Resizable控件有许多可用的事件，包括“ resize ”事件。

这可能不是实现这一目标的唯一方法，甚至可能是最好的方法，但它可能是一种方法。

当resize开始（将由resize事件拾取）时，获取要保留的元素的顶部和/或左侧位置 （即您不希望重叠的元素）。 我将这个元素称为目标。

在调整已resize的元素时，请检查其大小是否大于目标的左侧位置，如果是，请阻止resize元素进一步增长。

粗略的例子：

var targetPos = $('#myTarget').position(); $('#myResizable').resizable({ resize: function(event, ui){ if (ui.position.left + ui.size.width > targetPos.left) { $(this).resizable({ maxWidth: ui.size.width }); } } });