Adam Adam - 4 months ago 31
CSS Question

Jquery Draggable + Bring to Front

I have a window with a number of chat DIV's where a user to chat to different people.

Currently the chat DIV's can be open and moved around but I can't see to get the currently select DIV to set at the front. eg: when you mousedown on a DIV it comes into the foreground.

HTML:

<div id="1000000001" class="chatMessenger">
<div class="chatMessengerContainer">
</div>
</div>


CSS:

div.chatMessenger {
position: absolute;
top: 50px;
left: 50px;
width: 250px;
height: 300px;
background-color: white;
z-index: 100;
border: 1px solid black;
}


JQUERY:

// JQUERY UI Draggable - Initialize
$('div#'+memberID).draggable({
containment: $('div#chatWrapper')
});


// JQUERY UI Draggable - Setting the Stack
$(document).on('mousedown','div.chatMessenger', function() {
alert('chat mouse down...');
//var stack = $( ".selector" ).draggable( "option", "stack" );
$(this).draggable( "option", "stack", ".products" );
});


The alert triggers in the mousedown so this is finding the correct element.

I have looked at Draggable z-index and stack but I was unable to get either working.

There will be many chat DIV's open at the same time to the selected one needs to sit at the front.

thankyou.

Answer

This should help

$('div.chatMessenger').not(this).css('z-index', '100');
$(this).css('z-index', '1000');

inside on('mousedown') function.