Изменение размера jQuery UI - направление работы - PullRequest
Новая
       51

Изменение размера jQuery UI - направление работы

9 голосов
/ 16 июля 2009

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

Ответы [ 7 ]

5 голосов
/ 26 августа 2010

При запуске, изменении размера и остановке обратных вызовов: 

$(this).data('resizable').axis
5 голосов
/ 17 июля 2009

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

Ответ 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;
}

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

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);        
});

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

4 голосов
/ 18 февраля 2014

Я знаю, что это вопрос давно, но данные решения не решают мою проблему. Я нашел способ добраться до обработчика в функции запуска, и он работает в 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' (вверх или вниз), а затем вычислил изменение размера в объекте, захватив исходный размер в функции запуска и используя функцию изменения размера как цикл продолжать рассчитывать это. Если размер уменьшался, направление было вверх, если с южной ручки, и вниз, если с северной ручки, и если оно увеличивалось, это означало, что направление было вниз от южной ручки или вверх от северной ручки.

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

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

3 голосов
/ 20 декабря 2011 
$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});
3 голосов
/ 17 июля 2009

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

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

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

  • n - север (вверху)
  • с - юг (внизу)
  • e - восток (справа)
  • ш - запад (слева)
  • ne - северо-восток (вверху слева)
  • se - юго-восток (внизу слева)
  • северо-запад - северо-запад (слева вверху)
  • sw - юго-запад (внизу слева)

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

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

1 голос
/ 30 января 2017

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

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

Размер элемента div изменяется в четырех направлениях с помощью свойства handle .

Проверьте это здесь:

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

0 голосов
/ 25 июня 2014

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

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

Код позволяет изменять размер элемента '#resizable' и размещает маркеры на северной и южной сторонах элемента. Если щелкнуть и перетащить северный маркер, то handleDirection имеет значение «n». Мне не удалось найти аналогичный способ сделать это с событием 'stop'.

...