jQuery resizable(), accessing the original object

Question

This may seem like an obvious thing, but I can't find it. When using resizable, I want to save the new width of the image, but how do I access the ID attribute of the image that I have just resized? This is my code:

$('img.article_image').resizable({
    aspectRatio: true,
    handles: "se",
    stop: function(event, ui){
     // Here I want to access the ID attribute
     // of the img.article_image I am resizing
}});

So, the ui object has ui.helper, which I can't use. I.e. ui.helper.attr("id") or $(ui.helper).attr("id") are both undefined. I can't use $(this).attr("id") either, but I CAN use $(this).width() to see the new width, so it's very odd.

What am I doing wrong? When using draggable() I seem to be able to access $(this) the correct way, but not with resizable... Any suggestions?

Answer 1

In your case you could just get the ID inside of stop callback with this code:

$('img.article_image').attr('id');

This will however duplicate the selector but parameters passed by stop callback function doesn't have the record of the original object that was resized.

Answer 2

I haven't used the resizeable plugin but if it follows the same guidelines as the built-in jQuery events then this will be a reference to the affected DOM element. So you can get a jQuery wrapped object like so:

$('img.article_image').resizable({
    aspectRatio: true,
    handles: "se",
    stop: function(event, ui){
        var img = $(this);
        var id = img.attr("id");
}});

Answer 3

the ui parameter holds the resized element

stop: function(event, ui){
 alert(ui.originalElement[0].id);
}