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

Question

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

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

Answer 1

jQuery UI 可调整大小控件有许多可用的事件，包括“resize ”事件。

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

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

当调整大小的元素变宽时，检查其大小是否大于目标的左侧位置，如果是，则防止调整大小的元素进一步增大。

粗略示例:

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 });
        }
      }
    });