CODEWITHSUNDEEP
jqueryjquery-uiuser-interfacedraggable
francesco
francesco

Reputation: 11

JQuery draggable divs

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

Upvotes: 0

Views: 4442

Answers (2)

francesco
francesco

Reputation: 11

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 });

Upvotes: 1

Gad
Gad

Reputation: 42326

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

Check it out here.

Upvotes: 0

Related Questions