Jquery Draggable + Bring to Front

Question

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

Answer 1

Though there is an option - 'stack' existing while initiating draggables like this -

$('.draggable').draggable({
    stack: ".draggable"
});

But it is not working properly, So I have wrote a small library dragToFront playing with z-index. Following is the plunkr link

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

Answer 2

This should help

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

inside on('mousedown') function.

Answer 3

For several draggables where you want to bring one to front and reset others to back:

$('.container').on('mousedown', function(event) { 
    $('.container').css('z-index','1');
    $( this ).css('z-index','1000');
});

Answer 4

I figured out that the easiest implementation is to move the div in the dom to the last position. so if you dont have to care about the position in the dom this is the easiest way without using z-index. i use this for positioning some sticky notes.

$("#chatWrapper").on('mousedown', '.chatMessenger', function() {
    $(this).appendTo("#chatWrapper");
});