防止jQuery UI可调整大小的元素覆盖另一个元素？

Question

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

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

Answer 1

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

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

当调整大小开始时（将由resize事件拾取），获取要保留的元素的top and/or left positions（即您不希望重叠的元素）。我将这个元素称为目标。

随着你的resized元素被加宽，检查它的大小是否大于目标的左边位置，如果是，则阻止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 });
        }
      }
    });