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

Question

有没有办法限制一个元素的大小调整，这样你就不能覆盖另一个元素？我知道您可以将包含设置为父元素，但在这里我只想阻止用户遮挡另一个同级元素的视图。

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

Answer 1

jQuery UI Resizable 控件有许多可用的事件，包括“ 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 });
        }
      }
    });