防止jQuery UI可调整大小的元素覆盖另一个元素? [英] Prevent jQuery UI resizable element from covering another element?

问题描述

是否有一种方法可以限制元素的大小调整，以使您无法覆盖另一个元素?我知道您可以将包含项设置为父元素，但是在这里我只是想阻止用户阻塞另一个同级元素的视图.

Is there a way to constrain the resizing of a element so that you cannot cover another element? I know you can set the containment to a parent element, but here I just want to stop the user from obstructing the view of another sibling element.

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

If resizing the dialog box on the left, I want the plugin to prevent the user from covering the dialog box on the right:

推荐答案

jQuery UI Resizable控件具有许多可用的事件，包括"

The jQuery UI Resizable control has a number of events available to it, including the "resize" event.

这可能不是完成此任务的唯一方法，甚至不一定是最好的方法，但这可能是一种方法.

This possibly isn't the only way to accomplish this, or even necessarily the best, but it might be one approach.

调整大小开始时(将由resize事件拾取)，获取顶部和/或左侧位置您要保留的元素(即您不想重叠的元素).我将这个元素称为目标.

When resizing starts (which will be picked up by the resize event), get the top and/or left positions of the element you want to preserve (i.e. the one you don't want to have overlapped). I'll refer to this element as the target.

随着调整大小的元素变大，请检查其大小是否大于目标的左侧位置，如果是，请防止调整大小的元素进一步增大.

As your resized element is widened, check to see whether its size is greater than the left position of your target and if so, prevent the resize element from growing any further.

粗略的示例:

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

这篇关于防止jQuery UI可调整大小的元素覆盖另一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！