jQuery UI resizable - direction of operation

Question

How can I determine the direction of resize operation? I tried googling that and found a ticket on jquery ui, that said it is fixed. But there is no doc on how to use it.

Panpipe

I would also like to know which handle was clicked at the start of the resize. – Siliqua

Please see my answer https://mcmap.net/q/1176775/-how-to-know-which-handle-is-getting-used-in-jquery-resizable – Selfpropelled

Answer 1

Not sure if you meant that you'd like to constrain the resize operation to a particular axis, or if you'd like to know what direction the resize actually occurred in.

RaYell's answer works if you wanted to former. I'll discuss the latter.

If you set up a resizable like this:

var r = $("#resizable");
r.resizable();

Let's say you'd like to know what direction the resize occurred in after the user releases the mouse button. Let's bind a function to the resize stop event:

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

Using the passed ui object, we can determine the relative change in size by subtracting the new size from the old size. After that, you can use delta_x and delta_y however you wish. Let's build a string that corresponds to one of the handles.

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

Note that this will not necessarily return which handle was actually used to perform the resize if you have handles on both sides of the element, only it's net direction.

Juju

This solution is cool, when I want to determine the change at the end of the resize. But the problem is, that I would like to know the direction at the beginning of the resize. I know this may seem absurd, since I can't guess, whether user will reduce or extend the size. But the only thing I need to know, is which hanlder was chosen - east or west (only those two are possible in my app). – Panpipe

Further to the final statement in this answer, won't this fail if, for example, the 'west' handle is moved? In that case, if the width is decreased - by moving the handle east - the delta_x will be less than zero, so the reported direction will be 'w'. – Tynan

Answer 2

In the start, resize, and stop callbacks:

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

Purlieu

Answer 3

I know this is a question from a long time ago, but the given solutions don't solve my problem. I found a way to get to the handler in the start function and it's working in FF and chrome. My organization doesn't support IE so it's untested, but in this case the FF way should work since it's the more standard event handling.

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dir is then the actual handler, you'll have to find the class and direction from that (parse from the class list, if I get there I'll post what I do).

It is useful to know the direction in which the resizing is happening before the resize for a lot of reasons, and I really think jQuery should have included a way to know which handle had been grabbed.

Later edit: jQueryUI provides getters for their API, in this case to get the handle list you'd just do

var handles = $( ".selector" ).resizable( "option", "handles" );

(which is straight from the horses mouth). In my case, I just checked if it was 'n' or 's' (up or down) and then calculated the change of size in the object by grabbing the original size in the start function, and using the resize function like a loop to keep calculating it. If the size was decreasing the direction was up if from the south handle and down if from the north handle, and if it was increasing it meant the direction was down from the south handle or up from the north handle.

To get whether it was 'n' or 's' being pulled, I just grabbed dir from above and sliced everything but the last letter off of the class name returned, since the class is something like ui-handle-s.

It's actually rather humorous as I didn't end up using most of this, since I changed it to only resize from the bottom. Since I'm not using it I hope someone else finds this helpful.

Pirouette

I'm experiencing a strange thing regarding this. If I click on the very edge of the resize handle, the element that is returned is actually the element that is present just outside the resizable element. The element still resizes though. Any chance you ran into that? – Shanahan

I had no problem like that, but the things I'm resizing are really small, about 100px wide with variable height. Since we didn't end up using this I just find the change in size. if you're only resizing from one side that might be an option. – Pirouette

Yeah, I think it's a problem with another jquery mousemove event on the other div that is interrupting the original resize event – Shanahan

Answer 4

I think the option handles is what you are after:

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

Where letters represent geographic directions:

• n - north (top)
• s - south (bottom)
• e - east (right)
• w - west (left)
• ne - north east (top left)
• se - south east (bottom left)
• nw - north west (top left)
• sw - south west (bottom left)

Use any subset of the above that you like.

You can find the documentation for that option here

Feminism

No, the OP does not want to define possible directions, but to determine which direction was actually chosen. – Redevelop

This does not address the original question. – Discretionary

Answer 5

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

Langton

Answer 6

Try this code:

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

The div is resized in four directions by using the handles property.

Check it out here:

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

Dealt

Answer 7

jsonx has got a good solution but you can also utilise the built-in events:

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

The code makes the '#resizable' element resizable and puts handles on the north and south sides of the element. If the north handle is clicked and dragged then handleDirection is 'n'. I have been unable to find a similar way to do this with the 'stop' event.

Koonce