Как изменить размер ТОЛЬКО по горизонтали или вертикали с помощью jQuery UI Resizable?

81

Единственное решение, которое я нашел, - установить максимальную и минимальную высоту или ширину с текущим значением.

Пример:

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

Но это действительно некрасиво, особенно если мне нужно программно изменить высоту элемента.

jquery jquery-ui jquery-ui-resizable Диего
источник

Ответы:

145

Вы можете установить изменения размера handlesопцию , чтобы показывать только на левой и правой (или восток / запад), как это:

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

Вы можете попробовать здесь.

Ник Крейвер
источник
7
Я только что обнаружил оговорку с этим решением. Он все равно поместит ширину и высоту, когда будет выполнен как встроенный стиль. У меня возникают проблемы с вертикальным решением. Как только я изменил его размер, ширина будет установлена, и она больше не 100% (а значение в пикселях). Просто поместите это здесь, на случай, если другие ищут и столкнутся с этим.
Fernker
@Fernker Да, это больно.
Бен
вы можете получить обратно процентную ширину, если передадите своему div свойства min-width и max-width с одинаковым значением. Это не будет отменено :)
Себастьен
2
Не проходит тест сдвиг-перетаскивание.
ничего не нужно 09
@nothingisneeded можете описать "тест сдвиг-перетаскивание"?
Jon z
27

Хотя плакат в основном просил изменить размер только по горизонтали, вопрос действительно касается и вертикального.

Вертикальный случай имеет особую проблему: вы могли установить относительную ширину (например, 50%), которую хотите сохранить даже при изменении размера окна браузера. Однако пользовательский интерфейс jQuery устанавливает абсолютную ширину в пикселях, как только вы сначала измените размер элемента, и относительная ширина будет потеряна.

Если обнаружен следующий код для этого варианта использования:

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

См. Также http://jsfiddle.net/cburgmer/wExtX/ и jQuery UI с изменяемым размером: автоматическая высота при использовании только восточного маркера

Cburgmer
источник
2
Очень интересно, спасибо. Буду иметь в виду. Я думаю, что важно отметить, что ширина элемента с изменяемым размером должна быть установлена ​​css, если нет, она будет потеряна после изменения размера. См. Здесь jsfiddle.net/paska/wExtX/10
Диего
1
Это решение, которое я искал. По какой-то причине, даже если ручка отключена для области, кажется, что ее размеры по-прежнему установлены в пиксели. Если вы не используете этот метод, вы потеряете высоту или ширину в%.
Сергей
На самом деле это не работает в jQuery-ui 1.11.0. Ширина CSS, установленная непосредственно для элемента, не берется из начальной ширины. Я пытаюсь установить ширину в процентах, и она записывается с числом px.
Бен
Спасибо, этот прием также пригождалось игнорировать «Shift-перетащить» , который поддерживает формат изображения при изменении размера (для горизонтального изменения размера, набор CSS , heightчтобы ''в resizeи stopобработчиков)
nothingisnecessary
18

Очень простое решение: 

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

Это также работает для draggable (). Пример: http://jsfiddle.net/xCepm/

Янв
источник
1
Это действительно некрасиво !! Кроме того, правильное решение (то, которое мы должны использовать) - это @Nick Craver's
Diego
1
Я согласен! :-) Но приятно, что он работает с resizable () и draggable ().
января
1
Мне нравится этот! Помимо того, что это круто с математической точки зрения, он оставляет ручку в правом нижнем углу, давая визуальный намек на то, что размер элемента можно изменять. В принятом решении ручка изменения размера скрыта, и пользователь должен догадаться, что нижнее поле является горячей точкой.
corwin.amber
Это идеально по причинам, заявленным @ corwin.amber
Ломбас
Идеально для моих нужд:{handles: 'se', grid: [10000, 1], autoHide: true}
electrotype
9

Решение состоит в том, чтобы настроить ваш размер так, чтобы он отменял изменения размера, который вам не нужен.

вот пример изменения размера только по вертикали:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
Lambder
источник
Разве это не будет некрасиво?
Диего,
1
Таким образом, пользователь видит дескриптор, который он не может использовать.
Нима
1

Я хотел разрешить изменение ширины при изменении размера браузера, но не тогда, когда пользователь изменяет размер элемента, это сработало нормально:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
Фархад Малекпур
источник
0

Для меня решения с ручками и resizeобработчиком работали нормально, поэтому пользователь видит дескриптор, но может изменять размер только по горизонтали, аналогичное решение должно работать для вертикального. Без нижнего правого обработчика пользователь может не знать, что он может изменять размер элемента.

При использовании ui.size.height = ui.originalSize.height;он не будет работать должным образом, если элемент изменил свой размер по сравнению с исходным состоянием.

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

Для лучшей производительности $(this)можно было удалить:

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 
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>
Винод Кумар
источник