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

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

пример:

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

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

7 77
jquery jquery-ui-sortable jquery-ui-resizable

7 ответов:

Вы можете установить размер handles опции показывать только слева и справа (или Восток / Запад), например:

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

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

135

в то время как плакат в основном просил изменить размер только по горизонтали, вопрос также требует вертикального.

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

если найден следующий код для работы в этом случае использования:

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

посмотреть также http://jsfiddle.net/cburgmer/wExtX/ и библиотека jQuery изменяемого размера пользовательского интерфейса : высота авто при использовании востоке справиться в одиночку

24

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

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

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

16

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

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

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

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

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