jQueryUI - Draggable Resetting z-index after "stop" Event Executes

Question

I am trying to re-order the z-indexes of several DIVs so that the most recently dragged stays topmost.
I have the following code:

$(".elementsIWantToDrag").draggable({
    zIndex: 10000,
    stop: function(){
        $(this).css('z-index', 9999);
        alert($(this).css('z-index'));
    }
});

...and all is well and good until the actual execution. When I mouse-up after dragging an item, sure enough I get the alert with 9999 as the z-index value. Immediately after I click "OK" to clear the alert box, FireBug shows the value being changed to 10.

It appears to me that the stop() event is being called before the draggable code is actually finished doing everything... like setting the z-index back to what it was before the dragging started.

Removing the zIndex: 10000 seems to have a slightly different effect - draggable assigns different numbers to the z-indexes than with that parameter, but it is still overriding what I'm trying to do.

Suggestions on how to get this to work?

Answer 1

You could possibly circumvent this issue by changing the z-index of the object on a mouseover (for an x-windows follow focus type affair), or mousedown event (so that it fires just before the draggable z-index kicks in) that is bound to the '.elementsIWantToDrag'. This could then occur before the draggable event starts, and so it would 'revert' the z-index back to whatever you set it to in the mouse down event, as opposed to what it is being set to currently.