unable to use jquery dragstop and resize stop inside event calls

i have an application where i'm creating divs by dragging across a canvas. I need these divs to be draggable and resizable. Here's my function:

开发者_如何学Go

function createDiv( $startX, $startY, $stopX, $stopY ) {
    if ($startX==$stopX || $startY==$stopY)
        return;

    var zona = $('<div class="zona"></div>');
    $(zona).css({position: "absolute", background: "#f81", overflow: "hidden", top: Math.min($startY,$stopY)+"px", left: Math.min($startX, $stopX)+"px",width: Math.abs($stopX-$startX)+"px", height: Math.abs($stopY-$startY)+"px" });
    $("#demo").append(zona);

    $(zona).draggable({
        stop: function(){
            alert("should store dimensions in a form here");
        }
    }).resizable({
        stop: function(){
            alert("should store dimensions in a form here");
        }
    });

    $nr_zone++;
}

The problem is that, while the created div will be draggable and resizable, the containing code in the stop functions won't work (i.e. the alerts won't work).

If anyone can spot the problem I'll be very grateful. Thank you.

---

Found out what the problem was: i was depending too much on $nr_zone which gets incremented before any of the events get fired; My solution is to store the value of $nr_zone in the element's id (sth like $(zona).attr("id","zona_"+$nr_zone)and replace its use in code with $(zona).attr("id").split("_")[1]. If there's a moer elegant solution i'd love to hear it.