Prevent jQuery UI resizable element from covering another element?

Question

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:

Answer 1

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.

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.

Rough example:

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