Trouble with Click to Front and DIV stacking

Question

I'm trying to setup a page that works similar to windows. There are a few layered DIVs that are draggable and resizeable. I wanted to make it so when a window is clicked it brings it to the front.

If I use the draggable stack function it works mostly as expected but only if you click and drag the window. If I only click but not drag I want it to still come to front like it would dragging.

 $('.window').click(function(){
            $('.ui-front').removeClass('ui-front');
            $(this).addClass('ui-front');
        });

Here is a jsfiddle I tried that got part of the way there: http://jsfiddle.net/wLe261mh

But it doesn't keep the layers right from one click to another. Try to get the Red on the Yellow but without the grey for example. Here is the same basic thing with the draggable stack function that works better but only when dragging. (it also seems to break the click to front option) $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable" }) http://jsfiddle.net/wLe261mh/1

Is there a better way to do this? Would be awesome if I could get it work like like the draggable stack function does and not have to keep track of z nubmers and add/subtract numbers of every element. Could get out of hand quick if I have 7-8 windows to keep track of.

Answer 1

I found a roundabout way of achieving what you are looking for.

If you incorporate this script on your site somewhere you can then change your $('.window').click(function(){}) to be;

$('.window').click(function(){
    $(this).simulate('drag');
});

You can see a working demonstration here: https://jsfiddle.net/rf7cowe3/

Basically, it seems the class .ui-front is ruining the whole stack function of the draggable - so I had to find a way to trigger the 'drag' event on click so that it tricks the function in to ordering the z-indexes appropriately.

Answer 2

Try mousedown instead of click. Click only registers after a mousedown then mouseup so if you are holding down the mouse and dragging it won't fire a click yet.

Answer 3

I found this built in part of draggable "Distance: 0" will allow it to utilize stack even if its not dragged.

 $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable", distance: 0 })

Still not ideal if using the cancel part to allow highlighting text, because then you can't click in the text part. But I wanted to post this answer in case this helps others. The Simulate answer above seems to work though even for text areas