jquery - 避免 jQuery UI 可调整大小 'alsoResize' 向相反方向移动

Question

In this plunk我有两个 div，橙色 div 可以调整大小，并且可以选择 alsoResize 来调整蓝色 div 的大小。

如果通过拖动橙色 div 的右侧或底部来调整大小，效果很好。但是，如果调整顶部或左侧的大小，则蓝色 div 的大小将以相反的方向调整。如何使蓝色div的大小调整方向与橙色div的方向相同？

HTML:

<div id="div1" 
style="width:100px;height:100px;background-color:orange;margin:30px;float:left"></div>

<div id="div2" 
style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>

Javascript:

$('#div1').resizable({
      handles: 'all',
      alsoResize: '#div2'
  });

Answer 1

alsoResize 选项仅更新相应元素的宽度和高度，但是从北侧或西侧调整大小使用 top 和 left ，alsoResize 不考虑这一点。

您可以实现自己的resize处理程序，您可以使用它来复制元素之间的top和left差异:

$('#div1').resizable({
    handles: 'all',
    alsoResize: '#div2',
    start: function() {
        this.div2pos = $("#div2").offset();
    },
    resize: function(e, ui) {
        var left = ui.position.left - ui.originalPosition.left;
        var top = ui.position.top - ui.originalPosition.top;
        var pos = this.div2pos;
        $("#div2").offset({top: pos.top + top, left: pos.left + left});
    }
});

但请注意:拖动时会连续调用 resize 处理程序，并且 .offset 是一个相当繁重的函数。如果页面的其余部分也很重(或者即使只是用户的浏览器很慢)，这可能会导致动画断断续续。您可以通过改用 .css({top:.. left:..}) 来改进这一点，但确切的实现将取决于您的实际用例。