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:..})来改进这一点，但确切的实现将取决于您的实际用例。

避免jQuery UI可调整大小&& 39; alsoResize＆＃39;向相反方向移动

1 个答案: