Geek asks and answers

How to handle resize event

I need to know which handle is being dragged, east or west.

$("#mydiv").resizable({
    handles: 'e, w',
    resize: function(event, ui) {
        // to do: get active handle
    }

Any help would be greatly appreciated. Thank.

+3
source share
6 answers

View event object:

var west = $(event.srcElement).hasClass('ui-resizable-w');
+2
source

with jquery has a class, it is too slow, just use

if(ui.position.left != ui.originalPosition.left) //for west resize

then you may know that east or west have been changed.

+7
source 
$( '#mydiv' ).resizable({
    resize: function( event, ui ) {
        // this will return direction as "n", "e", "s", "se" etc.
        var $direction = $( this ).data( 'resizable' ).axis;
    }
});
+5
source

it's simpler, just get the event target (which is the DOM element that raised the event)

$(event.target)
+2
source

This worked for me: (Resize trigger event)

if (e.toElement.className.indexOf("ui-resizable-w") >= 0) {
  console.log('west');
} else if (e.toElement.className.indexOf("ui-resizable-e") >= 0) {
  console.log('east');
}
0
source

This works for me in jQuery UI v1.11.4

$(event.target).data('uiResizable').axis
0
source

More articles:


All Articles