jQuery UI Resizable alsoResize reverse

jQuery UI Resizable alsoResize reverse

提问by Senthil Kumar Bhaskaran

How to make the jQuery UI Resizable alsoResize reverse direction.

如何让 jQuery UI Resizable 也Resize 反向。

suppose in the html there is two div tag is there, if i resize in upward means the other thing has to resize downward

假设在 html 中有两个 div 标签，如果我向上调整大小意味着另一件事必须向下调整大小

<script>
        $(function() {
        $("#resizable").resizable({alsoResize: ".myiframe"});

    });
</script>
<div id = "resizable">
        This is the resizable content...
</div>

<div class="myframe">
   This must resize in reverse direction...
</div>

i tried it but of no use please guide to solve this

我试过了，但没有用，请指导解决这个问题

回答by Simen Echholt

By modifying the code jQuery uses to implement the alsoResizeoption, we can make our own alsoResizeReverseoption. Then we can simply use this as follows:

通过修改 jQuery 用于实现alsoResize选项的代码，我们可以创建我们自己的alsoResizeReverse选项。然后我们可以简单地使用它如下：

$("#resizable").resizable({
    alsoResizeReverse: ".myframe"
});

The structure of the original alsoResizeoption has been changed over the various versions of jQuery UI and my original code does not work in the newer versions. I'll give the code for adding this functionality in version 1.8.1 and 1.11.4.

原始alsoResize选项的结构已在各种版本的 jQuery UI 上发生变化，我的原始代码在较新的版本中不起作用。我将给出在 1.8.1 和 1.11.4 版本中添加此功能的代码。

Only a few things had to be changed, such as the obvious renaming alsoResizeto alsoResizeReverseand subtracting the deltainstead of adding it (what makes the resize reversed). The original alsoResizecode starts on line 2200 of version 1.8.1of jQuery UI and line 7922 of version 1.11.4. You can see the few changes needed here.

只有几件事情必须改变，如明显的重命名alsoResize，以alsoResizeReverse和减去delta加入它，而不是（什么使调整大小反转）。原始alsoResize代码从jQuery UI版本 1.8.1的第 2200行和版本 1.11.4 的第 7922 行开始。您可以在此处看到所需的少量更改。

To add the alsoResizeReversefunctionality, add this to your javascript (This should be put outside of document.ready()):

要添加alsoResizeReverse功能，请将其添加到您的 javascript 中（这应该放在 document.ready() 之外）：

For newer versions of jQuery UI (example is based on v1.11.4):

对于较新版本的 jQuery UI（示例基于 v1.11.4）：

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function() {
        var that = $(this).resizable( "instance" ),
            o = that.options;

        $(o.alsoResizeReverse).each(function() {
            var el = $(this);
            el.data("ui-resizable-alsoresizeReverse", {
                width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
                left: parseInt(el.css("left"), 10), top: parseInt(el.css("top"), 10)
            });
        });
    },

    resize: function(event, ui) {
        var that = $(this).resizable( "instance" ),
            o = that.options,
            os = that.originalSize,
            op = that.originalPosition,
            delta = {
                height: (that.size.height - os.height) || 0,
                width: (that.size.width - os.width) || 0,
                top: (that.position.top - op.top) || 0,
                left: (that.position.left - op.left) || 0
            };

        $(o.alsoResizeReverse).each(function() {
            var el = $(this), start = $(this).data("ui-resizable-alsoresize-reverse"), style = {},
                css = el.parents(ui.originalElement[0]).length ?
                    [ "width", "height" ] :
                    [ "width", "height", "top", "left" ];

            $.each(css, function(i, prop) {
                var sum = (start[prop] || 0) - (delta[prop] || 0);
                if (sum && sum >= 0) {
                    style[prop] = sum || null;
                }
            });

            el.css(style);
        });
    },

    stop: function() {
        $(this).removeData("resizable-alsoresize-reverse");
    }
});

For older version (based on v1.8.1 -- my original answer):

对于旧版本（基于 v1.8.1 - 我的原始答案）：

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function(event, ui) {

        var self = $(this).data("resizable"), o = self.options;

        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
                    left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },

    resize: function(event, ui){
        var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
            top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
        },

        _alsoResizeReverse = function(exp, c) {
            $(exp).each(function() {
                var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];

                $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
                    var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
                    if (sum && sum >= 0)
                        style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                }

                el.css(style);
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
            $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
        }else{
            _alsoResizeReverse(o.alsoResizeReverse);
        }
    },

    stop: function(event, ui){
        var self = $(this).data("resizable");

        //Opera fixing relative position
        if (self._revertToRelativePosition && $.browser.opera) {
            self._revertToRelativePosition = false;
            el.css({ position: 'relative' });
        }

        $(this).removeData("resizable-alsoresize-reverse");
    }
});

Here's a demo: http://jsfiddle.net/WpgzZ/

这是一个演示：http: //jsfiddle.net/WpgzZ/

回答by robertpaulsen

I had a problem getting the "Simen Echholt"-code to work with jQuery 1.9.1/jquery-ui (1.10.2), but it worked when I exchanged "$(this).data("resizable")" with "$(this).data("ui-resizable")".

我在让“Simen Echholt”代码与 jQuery 1.9.1/jquery-ui (1.10.2) 一起工作时遇到了问题，但是当我将“ $(this).data(” resizable“)”与“ $(this).data(" ui-resizable")"。

回答by Dariusz Gardyński

Update to jQuery 2.1.1 and jQuery UI 1.11.2.

更新到 jQuery 2.1.1 和 jQuery UI 1.11.2。

$.ui.plugin.add("resizable", "alsoResizeReverse", {

  start: function() {
    var that = $(this).resizable("instance"),
      o = that.options,
      _store = function(exp) {
        $(exp).each(function() {
          var el = $(this);
          el.data("ui-resizable-alsoResizeReverse", {
            width: parseInt(el.width(), 10),
            height: parseInt(el.height(), 10),
            left: parseInt(el.css("left"), 10),
            top: parseInt(el.css("top"), 10)
          });
        });
      };

    if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.parentNode) {
      if (o.alsoResizeReverse.length) {
        o.alsoResizeReverse = o.alsoResizeReverse[0];
        _store(o.alsoResizeReverse);
      } else {
        $.each(o.alsoResizeReverse, function(exp) {
          _store(exp);
        });
      }
    } else {
      _store(o.alsoResizeReverse);
    }
  },

  resize: function(event, ui) {
    var that = $(this).resizable("instance"),
      o = that.options,
      os = that.originalSize,
      op = that.originalPosition,
      delta = {
        height: (that.size.height - os.height) || 0,
        width: (that.size.width - os.width) || 0,
        top: (that.position.top - op.top) || 0,
        left: (that.position.left - op.left) || 0
      },

      _alsoResizeReverse = function(exp, c) {
        $(exp).each(function() {
          var el = $(this),
            start = $(this).data("ui-resizable-alsoResizeReverse"),
            style = {},
            css = c && c.length ?
            c :
            el.parents(ui.originalElement[0]).length ? ["width", "height"] : ["width", "height", "top", "left"];

          $.each(css, function(i, prop) {
            var sum = (start[prop] || 0) - (delta[prop] || 0);
            if (sum && sum >= 0) {
              style[prop] = sum || null;
            }
          });

          el.css(style);
        });
      };

    if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.nodeType) {
      $.each(o.alsoResizeReverse, function(exp, c) {
        _alsoResizeReverse(exp, c);
      });
    } else {
      _alsoResizeReverse(o.alsoResizeReverse);
    }
  },

  stop: function() {
    $(this).removeData("resizable-alsoResizeReverse");
  }
});
$(function() {

  $("#resizable").resizable({
    alsoResizeReverse: ".myframe"
  });

});

#resizable,
.myframe {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 20px;
  width: 50%;
  height: 150px
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="resizable">
  This is the resizable content...
</div>

<div class="myframe">
  This must resize in reverse direction...
</div>

[http://jsfiddle.net/WpgzZ/1136/][1]

[ http://jsfiddle.net/WpgzZ/1136/][1]

回答by josephbaker

$('#div1').resizable({
        handles: 'n',
        resize: function(){
            $('#div2').css("height","-"+ui.size.height+"px");
        }
    }).bind("resize", function () {
        $(this).css("top", "auto"); //To handle the issue with top
    });

This should also work to resize another div in the opposite direction.

这也应该可以在相反的方向调整另一个 div 的大小。

回答by marg t

Even if the code posted by Simen works very well, here is my code to resize two div vertically (and it works fine)

即使 Simen 发布的代码工作得很好，这里是我的代码来垂直调整两个 div 的大小（并且工作正常）

<script>
    var myheight  = ($(window).height()-50);
    var mywidth  = $(window).width();
    $(window).load(function () {
        $("#resizable").height(100); 
        $("#content").height(myheight-$("#resizable").height()); 
    });
</script>

<div id="resizable" style="border:1px solid #333; overflow:auto">resizable</div> 
<div id="content" style="border:1px solid red; overflow:auto">content</div> 

<script>
    $("#resizable").resizable({ 
        handles: 's', 
        maxHeight: myheight,
        resize: function() {
        $("#content").height(myheight-$("#resizable").height());
        }
    });
</script>

回答by freeworlder

Adapted the ideas from marg t and Joseph Baker - which I think is a far better approach. This method doesn't require any Jquery library hack or plugin to split a div into two panes. Just add a function to offset width in the resizable 'resize' event:

改编了 marg t 和 Joseph Baker 的想法——我认为这是一个更好的方法。此方法不需要任何 Jquery 库 hack 或插件将 div 拆分为两个窗格。只需在可调整大小的 'resize' 事件中添加一个函数来偏移宽度：

$("#left_pane").resizable({
  handles: 'e', //'East' draggable edge
  resize: function() {
    $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
  }
});

Here's the complete JS fiddle.

这是完整的JS fiddle。

回答by Jaron Gao

Updated for jquery-ui 1.10.4

更新了 jquery-ui 1.10.4

$.ui.plugin.add('resizable', 'alsoResizeReverse', {

  start: function () {
    var that = $(this).data('ui-resizable'),
    o = that.options,
    _store = function (exp) {
      $(exp).each(function() {
        var el = $(this);
        el.data('ui-resizable-alsoresize-reverse', {
          width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
          left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10)
        });
      });
    };

    if (typeof(o.alsoResizeReverse) === 'object' && !o.alsoResizeReverse.parentNode) {
      if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0]; _store(o.alsoResizeReverse); }
      else { $.each(o.alsoResizeReverse, function(exp) { _store(exp); }); }
    }else{
      _store(o.alsoResizeReverse);
    }
  },

  resize: function (event, ui) {
    var that = $(this).data('ui-resizable'),
    o = that.options,
    os = that.originalSize,
    op = that.originalPosition,
    delta = {
      height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
      top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
    },

    _alsoResizeReverse = function(exp, c) {
      $(exp).each(function() {
        var el = $(this), start = $(this).data('ui-resizable-alsoresize-reverse'), style = {},
        css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];

        $.each(css, function(i, prop) {
          var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
          if (sum && sum >= 0) {
            style[prop] = sum || null;
          }
        });

        el.css(style);
      });
    };

    if (typeof(o.alsoResizeReverse) === 'object' && !o.alsoResizeReverse.nodeType) {
      $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
    }else{
      _alsoResizeReverse(o.alsoResizeReverse);
    }
  },

  stop: function(event, ui){
    $(this).removeData("resizable-alsoresize-reverse");
  }
});