¿Impedir que el elemento de tamaño variable de jQuery UI cubra otro elemento?

¿Hay una manera de restringir el cambio de tamaño de un elemento para que no pueda cubrir otro elemento? Sé que puede establecer la contención en un elemento padre, pero aquí solo quiero evitar que el usuario obstruya la vista de otro elemento hermano.

Si cambia el tamaño del cuadro de diálogo de la izquierda, quiero que el complemento evite que el usuario cubra el cuadro de diálogo de la derecha: introduzca la descripción de la imagen aquí

El control jQuery UI Resizable tiene varios eventos disponibles, incluido el evento ” redimensionar “.

Posiblemente esta no sea la única forma de lograr esto, o incluso necesariamente la mejor, pero podría ser un enfoque.

Cuando comience el cambio de tamaño (que será recogido por el evento de cambio de tamaño), obtenga las posiciones superior e izquierda del elemento que desea conservar (es decir, la que no desea que se haya superpuesto). Me referiré a este elemento como el objective.

A medida que se amplía su elemento de redimensionamiento, verifique si su tamaño es mayor que la posición izquierda de su objective y, de ser así, evite que el elemento de redimensionamiento siga creciendo.

Ejemplo áspero:

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