CODEWITHSUNDEEP
jqueryjquery-ui
ps0604
ps0604

Reputation: 1071

Avoid jQuery UI resizable 'alsoResize' to move in opposite direction

In this plunk I have two divs, the orange div is resizable and has the option alsoResize to resize the blue 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:

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

Upvotes: 2

Views: 1158

Answers (1)

blgt
blgt

Reputation: 8205

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.

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

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.

Upvotes: 2

Related Questions