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

Question

Я использую jquery resizable для изменения размера div

$("#mainDiv").resizable({
        handles: 's, e',
        start: function(event, ui) { 
        // want to perform some action here
    },
        resize: function(event, ui) { 
        // want to perform some action here }
    });

Теперь я хочу сделать некоторые вещи, основываясь на том факте, что s или e выбран для изменения размера, в основном изменение размера является вертикальным или горизонтальнымкак это сделать

Спасибо

Answer 1

Ось помещается в виде данных для вашего элемента в ui-resizable, например:

$(element).data('ui-resizable').axis

Answer 2

// the following will return direction as "n", "e", "s", "se" etc.
$("#selector").resizable({
    resize: function(e, ui) {
        // for jquery-ui 1.9.2
        var direction = $(this).data('resizable').axis;
        // for jquery-ui 1.11.4
        var direction = $(this).data('ui-resizable').axis;
    }
});

Answer 3

Просто чтобы расширить ответ на @ user3322509:

$("#selector").resizable({      
    resize: function(e,ui) {
        console.log( ui.element.data("ui-resizable").axis )
    }
});

Answer 4

Я использовал этот метод из: https://stackoverflow.com/a/13832254/1896534

 var handleTarget; //set scope

    $('#resize-this').resizable({
      handles: 'n,e,s,w',

      start: function(ui,event){
        handleTarget = $(event.originalEvent.target);
      },

      resize: function(ui,event){
        if (handleTarget.hasClass('ui-resizable-s'){
           //do stuff
        }
      } 
    )};

Answer 5

Готово изменено

ui: function() {
    return {
        originalElement: this.originalElement,
        element: this.element,
        helper: this.helper,
        position: this.position,
        size: this.size,
        originalSize: this.originalSize,
        originalPosition: this.originalPosition,
        };
}

на

ui: function() {
    return {
        originalElement: this.originalElement,
        element: this.element,
        helper: this.helper,
        position: this.position,
        size: this.size,
        originalSize: this.originalSize,
        originalPosition: this.originalPosition,
        handle : this.axis
    };
}

ui.handle возвращает мне имя дескриптора:)

Answer 6

Не могли бы вы реализовать функцию для события stop и затем проверить, был ли размер элемента изменен по горизонтали или вертикали, используя ui.originalSize и ui.size, что-то вроде:

    stop: function(event, ui) {
        if (ui.originalSize.width !== ui.size.width) {
            //element has been resized horizontally
        }
        if (ui.originalSize.height !== ui.size.height) {
            //element has been resized vertically
        }
    }