Предотвратить изменение размера элемента 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 });
        }
      }
    });