ti-enxame.com

Como redimensionar apenas horizontalmente ou verticalmente com jQuery UI redimensionável?

A única solução que encontrei é definir a altura máxima e mínima ou a largura com o valor atual.

Exemplo:

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

Mas isso é realmente feio, especialmente se eu tiver que alterar a altura do elemento programaticamente.

79
Diego

Você pode definir o redimensionamento handles option para mostrar apenas à esquerda e à direita (ou leste/oeste), assim:

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

Você pode tentar aqui

138
Nick Craver

Enquanto o pôster estava pedindo principalmente um redimensionamento somente horizontal, a pergunta também pede vertical.

O caso vertical tem um problema especial: você pode ter definido uma largura relativa (por exemplo, 50%) que deseja manter mesmo quando a janela do navegador é redimensionada. No entanto, a IU do jQuery define uma largura absoluta em px quando você redimensiona o elemento e a largura relativa é perdida.

Se encontrou o seguinte código para trabalhar neste caso de uso:

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

Veja também http://jsfiddle.net/cburgmer/wExtX/ e jQuery UI redimensionável: altura automática ao usar o manipulador leste sozinho

25
cburgmer

Uma solução muito simples: 

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

Isso funciona para draggable () também. Exemplo: http://jsfiddle.net/xCepm/

16
Jan

A solução é configurar o seu redimensionável para que ele cancele as alterações da dimensão que você não deseja.

aqui está um exemplo de verticalmente apenas redimensionável:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
}); 
9
Lambder

Eu queria permitir redimensionar a largura quando o navegador redimensionar, mas não quando o usuário altera o tamanho do elemento, isso funcionou bem:

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

Para mim, as soluções com ambas as alças e o manipulador resize funcionaram bem, de modo que o usuário vê a alça, mas pode redimensionar apenas na horizontal, a solução semelhante deve funcionar na vertical. Sem bottom right handler o usuário pode não estar ciente que ele pode redimensionar o elemento.

Ao usar ui.size.height = ui.originalSize.height;, ele não funcionará corretamente se o elemento for alterado, ele será dimensionado no 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 melhor desempenho, $(this) pode ser removido:

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", '');
    }
});
0
user133408
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>
0
Vinod Kumar