Since jQuery UI inserts elements into your resizable <div>
for each handle, you can work out which one is being targeted each time a resize begins:
start: function (e) {
var className = e.originalEvent.target.className.split(" ").pop();
var side = className.replace("ui-resizable-","",className);
console.log(side); // e or w
}
e.originalEvent.target
is the 'handle' (DOM element)- We get the full classname, split the classes, and get the last one using
pop()
. (The last class is something likeui-resizable-e
- Remove the 'ui-resizable-' bit from your string using
replace()
and you receieve what's left (e or w)
Note: It'll of course work should you choose to use North and South handles too.