jQuery UI resizable - direction of operation

问题

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.

回答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.

回答2:

In the start, resize, and stop callbacks:

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

回答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.

回答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

回答5:

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

回答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

回答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.

来源：https://stackoverflow.com/questions/1139788/jquery-ui-resizable-direction-of-operation

标签

jquery

user-interface

resizable