jQuery UI Resizable tambiénResize reverso

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 tags div, si cambio de tamaño hacia arriba significa que la otra cosa tiene que cambiar de tamaño hacia abajo

 $(function() { $("#resizable").resizable({alsoResize: ".myiframe"}); });  
This is the resizable content...
This must resize in reverse direction...

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

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 aquí .

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/

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 “) “.

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 } 
    
This is the resizable content...
This must resize in reverse direction...
 $('#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.

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)

  
resizable
content

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 .

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