JQuery draggable divs

Question

I have an application whose interface is based around a typical OS user interface with draggable tabs.

I want to make the tabs act like windows in an OS in the way that the last clicked tab/window appears 'on top' of any other windows.

I know this has to do with the z-index of the elements. Here is a simplified version of the code:

<div class="tab">
content
</div>

$('.tab').draggable({ zIndex: 1000000 });

The desired behaviour occurs when the tab is in the act of being dragged i.e. it appears 'above' all elements as it is dragged around the page, but once the mouse button is let go the dragged div falls behind again.

Is there anyway to achieve the behaviour described above?

Thank you

Answer 1

Manually set the z-index for your div's css once you finished dragging.

Check it out here.

Answer 2

Thanks for the quick replies. I found a simple way to do it, I completely overlooked the JQuery documentation.

Using the stack option:

$('.tab').draggable( {stack: { group: '.tab', min: 50 });