jquery - jQuery UIのサイズ変更可能な要素が別の要素を覆うのを防ぎますか?

Question

別の要素を覆うことができないように、要素のサイズ変更を制限する方法はありますか? 包含を親要素に設定できることは知っていますが、ここでは、ユーザーが別の兄弟要素のビューを妨げないようにしたいだけです。

左側のダイアログ ボックスのサイズを変更する場合、ユーザーが右側のダイアログ ボックスを覆わないようにプラグインが必要です。

Answer 1

jQuery UI の Resizable コントロールには、「 resize」イベントを含む、使用可能な多数のイベントがあります。

これはおそらくこれを達成する唯一の方法ではなく、必ずしも最良の方法でもありませんが、1 つのアプローチである可能性があります。

サイズ変更が開始されたら (サイズ変更イベントによって取得されます)、保持したい要素 (つまり、オーバーラップさせたくない要素) の上または左の位置を取得します。この要素をターゲットと呼びます。

サイズ変更された要素が拡大されると、そのサイズがターゲットの左の位置よりも大きいかどうかを確認し、大きい場合は、サイズ変更要素がそれ以上大きくならないようにします。

大まかな例:

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