防止jQuery UI可調整大小的元素覆蓋另一個元素？

Question

有沒有一種方法來限制元素的大小調整，以便您不能覆蓋另一個元素？我知道你可以將包含設置爲父元素，但在這裏我只是想阻止用戶阻止另一個兄弟元素的視圖。

如果調整左側的對話框中，我希望插件阻止用戶覆蓋右邊的對話框：

Answer 1

的jQuery UI的大小可調整控制有一些事件提供給它，包括「resize」事件。

這可能不是實現這一目標的唯一方法，或者甚至是最好的，但它可能是一種方法。

當調整大小開始時（將由調整大小事件拾取），獲取要保留的元素（即，不想重疊的元素）的top and/or left positions。我將把這個元素作爲目標。

當您調整大小的元素變寬時，請檢查它的大小是否大於目標的左邊位置，如果是，請防止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 }); 
     } 
     } 
    });