How to know which handle was used when resizing an element in jQuery

Question

For my project I need to know which border ('e' or 'w') the user take to resize a div. So is it possible to know or not?

I got that:

$(divProjet).resizable({
   handles: "e,w",
   grid: 71,
   maxWidth: 1498,
   minWidth: 69,
   containment: $($(this).parent()[0]).parent()[0],
   start: function () {

   },
   stop: function (event, ui) {
      var numDayModif = (ui.size[0] - ui.originalSize[0]) / 71;
   }
});

Answer 1

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 like ui-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.

JSFiddle