div - jQuery UI Resizable tambiénResize reverso

resizable traduccion

Question

Cómo hacer que la interfaz de usuario de jQuery pueda redimensionarse también Redimensionar la dirección inversa.

supongamos que en el html hay dos etiquetas div, si cambio de tamaño hacia arriba significa que la otra cosa tiene que cambiar de tamaño hacia abajo

<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>

Lo intenté pero no sirvió de nada guiarme para resolver esto

Answer 1

Actualice a jQuery 2.1.1 y 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]

Answer 2

Actualizado para 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");
  }
});

Answer 3

Adaptaron las ideas de marg t y Joseph Baker, que creo que es un enfoque mucho mejor. Este método no requiere ningún hack o plugin de biblioteca Jquery para dividir un div en dos paneles. Simplemente agregue una función para compensar el ancho en el evento redimensionable ''resize'':

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

Aquí está el violín completo de JS .

Answer 4

Al modificar el código que utiliza jQuery para implementar la opción alsoResize , podemos hacer nuestra propia opción alsoResizeReverse . Entonces podemos simplemente usar esto de la siguiente manera:

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

La estructura de la opción original de alsoResize original se modificó en las distintas versiones de jQuery UI y mi código original no funciona en las versiones más recientes. Daré el código para agregar esta funcionalidad en la versión 1.8.1 y 1.11.4.

Solo se tuvieron que cambiar algunas cosas, como el obvio cambio de nombre alsoResize a " alsoResizeReverse y restar el delta lugar de agregarlo (lo que hace que el cambio de tamaño se invierta). El código de alsoResize original alsoResize comienza en la línea 2200 de la versión 1.8.1 de jQuery UI y la línea 7922 de la versión 1.11.4 . Puedes ver los pocos cambios necesarios here .

Para agregar la funcionalidad alsoResizeReverse , agregue esto a su javascript (Esto debe colocarse fuera de document.ready ()):

Para versiones más recientes de jQuery UI (el ejemplo se basa en 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");
    }
});

Para una versión anterior (basada en v1.8.1 - mi respuesta original):

$.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");
    }
});

Aquí hay una demostración: http://jsfiddle.net/WpgzZ/

Answer 5

Incluso si el código publicado por Simen funciona muy bien, aquí está mi código para cambiar el tamaño de dos div verticalmente (y funciona bien)

<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>

Answer 6

Tuve un problema para obtener el código "Simen Echholt" para trabajar con jQuery 1.9.1 / jquery-ui (1.10.2), pero funcionó cuando intercambié " $ (this) .data (" resizable ") " con " $ (this) .data (" ui-resizable ") ".

Answer 7

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

Esto también debería funcionar para cambiar el tamaño de otro div en la dirección opuesta.