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