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

问题描述

我有两个div，橙色div可调整大小并且具有选项 alsoResize 调整蓝色div的大小。

In this plunk I have two divs, the orange div is resizable and has the option alsoResize to resize the blue div.

如果你通过拖动橙色div的右侧或底部来调整大小，它运作良好。但是，如果调整顶部或左侧的大小，则蓝色div将在相反方向上调整大小。如何使蓝色div调整大小与橙色div相同？

If you resize by dragging the right or bottom sides of the orange div, it works well. However, if you resize the top or left sides, the blue div is resized in the opposite direction. How to make the blue div resize in the same direction as the orange 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：

Javascript:

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

推荐答案

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

The alsoResize option only updates the width and height of the corresponding elements, however resizing from the north or west sides uses top and left, which alsoResize doesn't consider.

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

You can implement your own resize handler which you can use to copy the top and left difference across elements:

$('#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});
    }
});

请注意，但是：调整大小调用处理程序在拖动的同时， .offset 是一个相当繁重的功能。如果页面的其余部分也很重（或者即使只是用户的浏览器很慢），这也会导致动画不稳定。您可以通过切换到使用 .css（{top：.. left：..}）来改进这一点，但确切的实现将取决于您的实际用例。

Beware, though: resize handlers are called continuously while dragging, and .offset is a rather heavy function. If the rest of your page is also heavy (or even if just the user's browser is slow), this can result in a choppy animation. You can improve this by switching to using .css({top:.. left:..}) but the exact implementation would depend on your actual use case.

这篇关于避免jQuery UI可调整大小的'alsoResize'向相反方向移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！