¿Cómo cambiar el tamaño SOLO horizontal o verticalmente con jQuery UI Resizable?

81

La única solución que he encontrado es establecer la altura o el ancho máximo y mínimo con el valor actual.

Ejemplo:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

Pero esto es realmente feo, especialmente si tengo que cambiar la altura del elemento mediante programación.

jquery jquery-ui jquery-ui-resizable Diego
fuente

Respuestas:

145

Puede configurar la handlesopción de cambio de tamaño para que solo se muestre a la izquierda y a la derecha (o este / oeste), así:

foo.resizable({
    handles: 'e, w'
});​

Puedes probarlo aquí.

Nick Craver
fuente
7
Acabo de encontrar una advertencia con esta solución. Todavía pondrá el ancho y el alto cuando se haga como un estilo en línea. Esto me está causando problemas con una solución solo vertical. Una vez que lo he redimensionado, se establece el ancho y ya no es 100% (sino un valor px). Solo pongo esto aquí en caso de que otros estén buscando y lo encuentren.
Fernker
@Fernker Sí, eso es una molestia.
Ben
puede recuperar un ancho porcentual si le da propiedades de ancho mínimo y ancho máximo del mismo valor a su div. No se anulará :)
Sébastien
2
No pasa la prueba de arrastre de cambios.
nada es necesario
@nothingisnecesario ¿puede describir la "prueba de desplazamiento y arrastre"?
Jon z
27

Si bien el póster pedía principalmente un cambio de tamaño solo horizontal, la pregunta también pide vertical.

El caso vertical tiene un problema especial: es posible que haya establecido un ancho relativo (por ejemplo, 50%) que desea mantener incluso cuando se cambia el tamaño de la ventana del navegador. Sin embargo, jQuery UI establece un ancho absoluto en px una vez que se cambia el tamaño del elemento por primera vez y se pierde el ancho relativo.

Si encuentra que el siguiente código funciona para este caso de uso:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

Consulte también http://jsfiddle.net/cburgmer/wExtX/ y jQuery UI redimensionable: altura automática cuando se usa este controlador solo

cburgmer
fuente
2
Muy interesante, gracias. Lo tendré en cuenta. Creo que es importante señalar que el elemento redimensionable debe tener su ancho establecido por css, de lo contrario, se perderá después de cambiar el tamaño. Ver aquí jsfiddle.net/paska/wExtX/10
Diego
1
Esta es la solución que estaba buscando. Por alguna razón, aunque el identificador está deshabilitado para la región, sus dimensiones parecen estar aún configuradas en px. Si no usa este método, pierde su% de altura o ancho basado.
Serhiy
En realidad, esto no parece funcionar en jQuery-ui 1.11.0. El ancho de CSS establecido directamente en el elemento no se toma del ancho inicial. Estoy tratando de establecer el ancho como un porcentaje y se escribe con un número de px.
Ben
Gracias, este truco también fue muy útil para ignorar el 'cambio de arrastre' que mantiene la relación de aspecto mientras cambia el tamaño (para cambiar el tamaño horizontal, conjunto css heighta ''los resizey stopmanipuladores)
nothingisnecessary
18

Una solución muy sencilla: 

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

Esto también funciona para draggable (). Ejemplo: http://jsfiddle.net/xCepm/

ene
fuente
1
¡Es realmente feo! Además, la solución correcta (la que se supone que debemos usar) es @Nick Craver's
Diego
1
¡Estoy de acuerdo! :-) Pero es bueno que funcione con resizable () y draggable ().
enero
1
¡Me gusta este! Además de ser matemáticamente genial, deja el asa en la esquina inferior derecha, dando una pista visual de que el elemento es redimensionable. En la solución aceptada, el controlador de cambio de tamaño está oculto y el usuario tiene que adivinar que el margen inferior es un punto de acceso.
corwin.amber
Esto es perfecto por las razones que dijo @ corwin.amber
Lombas
Eso fue perfecto para mis necesidades:{handles: 'se', grid: [10000, 1], autoHide: true}
electrotipo
9

La solución es configurar su redimensionable para que cancele los cambios de la dimensión que no desea.

aquí hay un ejemplo de tamaño variable solo verticalmente:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
Lambder
fuente
¿No sería eso algo feo también?
Diego
1
De esta forma, el usuario ve un identificador que no puede usar.
nima
1

Quería permitir cambiar el tamaño del ancho cuando el navegador cambia de tamaño, pero no cuando el usuario cambia el tamaño del elemento, esto funcionó bien:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
Farhad Malekpour
fuente
0

Para mí, las soluciones con manijas y resizemanipulador funcionaron bien, por lo que el usuario ve el mango pero puede cambiar el tamaño solo horizontalmente, una solución similar debería funcionar para vertical. Sin el controlador de la parte inferior derecha , es posible que el usuario no sepa que puede cambiar el tamaño del elemento.

Cuando se usa ui.size.height = ui.originalSize.height;, no funcionará correctamente si el elemento cambia su tamaño desde el estado inicial.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

Para un mejor rendimiento $(this)podría eliminarse:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

fuente
0 
Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>
Vinod Kumar
fuente