Setting z-index in draggable start and stop events

I want to fix this problem with the z-index of a draggable div. I have been setting the z-index to be around 99999. But this causes problems for other elements on the page. Instead of having a fixed z-index, it occurred to me that a better way could be to set the z-index in the draggable start and stop.

I have this code to do that.

$('#id').draggable({ 
    start: function(e开发者_开发百科vent, ui) { 
           var $item = ui.draggable;
           $item.css("z-index","999999");
            },
    stop: function(event, ui) {  
           var $item = ui.draggable;
           $item.css("z-index","");
           } 
});

This should set the z-index when dragging starts, then set it to an empty string when dragging stops. But it doesn't do it. What could be wrong?

Someone suggested using the z-index for the ui-draggable-dragging class, but that did not fix the problem either.

.ui-draggable-dragging {
    z-index:9999;
}

Is that class applied to the element automatically, must it be added in code?

The problem I was trying to fix is that the draggables did not go beyond the container. This happened because overflow was specified overflow:hidden. If I remove this, the code works.

Don't set it to an empty string. Set it to auto instead.

$(function(){           // Just to make sure we're clear, this must be here.
  $('#id').draggable({ 
    start: function(event, ui) { 
      $(this).css("z-index","999999");
    }, 
    stop: function(event, ui) {  
      $(this).css("z-index","auto");
    } 
  });
});

This should, assuming everything else is proper, put it back to its natural z-index