jQuery UI resizable-направление работы

Как определить направление операции изменения размера? Я попытался погуглить это и нашел билет на jQuery ui, который сказал, что он исправлен. Но нет никакого документа о том, как его использовать.

9
jquery resizable user-interface

7 ответов

не уверен, что вы имели в виду, что вы хотели бы ограничить операцию изменения размера к определенной оси, или если вы хотите знать, в каком направлении изменение размера на самом деле произошло.

ответ RaYell работает, если вы хотите бывший. Я буду обсуждать последнее.

если вы настроили изменяемый размер, как это:

var r = $("#resizable");
r.resizable();

предположим, вы хотите знать, в каком направлении произошло изменение размера в после пользователь отпускает кнопку мыши. Давайте свяжем функцию с событие остановки изменения размера:

r.bind('resizestop', function(event, ui) {
    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;
}

используя переданный объект ui, мы можем определить относительное изменение размера, вычитая новый размер из старого размера. После этого, вы можете использовать delta_x и вы пожелаете. Давайте построим строку, которая соответствует одному из дескрипторов.

r.bind('resizestop', function(event, ui) {

    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;

    // build direction string
    var dir = '';

    if (delta_y > 0) { 
        dir += 's';
    } else if (delta_y < 0) { 
        dir += 'n';         
    }      

    if (delta_x > 0) { 
        dir += 'e';
    } else if (delta_x < 0) { 
        dir += 'w';
    }

    // do something with this string
    alert(dir);        
});

обратите внимание, что это не обязательно возвращает дескриптор, который фактически использовался для изменения размера, если у вас есть дескрипторы с обеих сторон элемента, только это net направление.

5

в начале, изменении размера и остановке обратных вызовов:

$(this).data('resizable').axis
5

Я знаю, что это вопрос давным-давно, но данные решения не решают мою проблему. Я нашел способ добраться до обработчика в функции запуска, и он работает в FF и chrome. Моя организация не поддерживает IE, поэтому она непроверена, но в этом случае способ FF должен работать, поскольку это более стандартная обработка событий.

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dir тогда фактический обработчик, вам нужно будет найти класс и направление из этого (разбор из списка классов, если я получу там я опубликую то, что я делаю).

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

позже редактировать: jQueryUI предоставляет геттеры для своего API, в этом случае, чтобы получить список дескрипторов, вы просто сделаете

var handles = $( ".selector" ).resizable( "option", "handles" );

(который прямо из уст лошадей). В моем случае я просто проверил, было ли это " n " или " s " (вверх или вниз) а затем рассчитал изменение размера объекта, захватив исходный размер в функции start и используя функцию resize как цикл, чтобы продолжать вычислять его. Если размер уменьшался, направление было вверх, если от Южной ручки, и вниз, если от Северной ручки, и если оно увеличивалось, это означало, что направление было вниз от Южной ручки или вверх от Северной ручки.

чтобы узнать, было ли это " n " или "s", Я просто схватил dir сверху и нарезанный все, кроме последней буквы имени класса, возвращается, так как класс-это что-то вроде ui-handle-s.

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

4

Я думаю, что вариант handles это то, что вам нужно:

$(selector).resizable({handles: 'n, s, e, w'})

, где буквы представляют географические направления:

  • n-север (сверху)
  • s-юг (снизу)
  • e-east (справа)
  • w-west (слева)
  • ne-северо-восток (вверху слева)
  • se-юго-восток (внизу слева)
  • nw-Северо-Запад (вверху слева)
  • sw-юго-запад (внизу слева)

использовать любое подмножество выше, что вам нравится.

вы можете найти документацию для этой опции здесь

3
$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});
3

попробуйте этот код: 

$( "#resizable" ).resizable({
    handles: "n, e, s, w",
    resize: function( event, ui ) {
       //your codes here
    }
});

div изменяется в четырех направлениях с помощью ручки собственность.

смотрите здесь:

http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable

1

jsonx имеет хорошее решение, но вы также можете использовать встроенные события:

$('#resizable').resizable({
    handles: 'n,s',
    start: function( event, ui ) {
        var handleDirection = event.srcElement.className.split("-").pop();
    }
});

код делает элемент "#resizable " изменяемым и помещает дескрипторы на северной и южной сторонах элемента. Если щелкнуть и перетащить Северный дескриптор, то handleDirection будет "n". Я не смог найти аналогичный способ сделать это с мероприятия "Стоп".

0