jQuery UI resizable - направление операции

Question

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

Answer 1

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

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

Если вы создали изменяемыми так:

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

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

Answer 2

Я думаю, что вариант handles является то, что вы после:

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

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

• п - север (сверху)
• s - южный (нижний)
• e - восток (справа)
• w - запад (слева)
• пе - на северо-восток (слева вверху)
• себе - на юго-восток (слева внизу)
• северо-запад - северо-запад (слева вверху)
• ЮЗ - юго-запад (слева внизу)

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

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

Answer 3

В начале, изменение размера и остановки функции обратного вызова:

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

Answer 4

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

ДИВ изменяет размер в четырех направлениях, используя ручку свойства.

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

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