How to know which handle is getting used in jquery resizable

问题

i am using jquery resizable to resize a 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 }
    });

now i want to do some stuff based on fact that whether s or e is selected to resize basically resizing is vertical or horizontal how to do that

Thanks

回答1:

The axis is placed as data on your element under ui-resizable like this:

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

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

回答3:

Could you implement a function for the stop event and then check whether the element has been resized horizontally or vertically using ui.originalSize and ui.size, something like:

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

回答4:

Done changed

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 returns me handle name :)

回答5:

I used this method from: 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
        }
      } 
    )};

回答6:

Just to expand on the answer by @user3322509:

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

来源：https://stackoverflow.com/questions/7118781/how-to-know-which-handle-is-getting-used-in-jquery-resizable

标签

jquery

jquery-ui

jquery-ui-resizable