1

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.

jerdill
  • 13
  • 3
  • Please consider using snippets instead of jsfiddles, for it saves time and greatly improves the speed at which we can solve the issue. – Spectric Oct 06 '20 at 02:28

3 Answers3

1

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.

Sarah
  • 132
  • 3
  • Thanks Sarah, I did try that but it doesn't seem to fix the root problem. The mousedown to front works still, but it doesn't keep the order right. Then if I add the draggable stacking, as soon as I drag something then the addclass/remove class function stops working. – jerdill Oct 06 '20 at 12:21
0

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.

Dexterians
  • 1,011
  • 1
  • 5
  • 12
  • that is really close to what I'm expecting, great solution! One minor problem I see is now is after clicking on the Main window it seems to drag itself down 1-2 pixels each time. Windows 2 and 3 don't do that, only the main window. Do you knwo what would be causing that? Also, was the script you added to the top customized from the normal jquery.simulate, or is that located somewhere I can just use as an include? Thanks! – jerdill Oct 06 '20 at 16:02
  • Edit to the above: you have to drag them around some first and then it effects a different window depending on which order you drag them. If you click and drag the windows in the jsfiddle a bit and then jsut try clicking only it should start acting up. – jerdill Oct 06 '20 at 16:16
  • @jerdill that issue doesnt appear to happen for me so I'm not sure what you mean? Also no, I made no modifications to that script I provided you. You can either download the JS file and link it like any other JS file (I provided a link to the source), or you can copy and paste it in to `` – Dexterians Oct 06 '20 at 22:13
  • I just found a fuction in draggable itself that might help others, if you use "distance 0" it will use the stack function even if you don't drag the window any different. ``` $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable", distance: 0 }) ```` You function was still helpful though, for draggable I wanted to cancel the text section so someone could highlight and copy paste text if they wanted without dragging the window. So for someone to click on a part of a DIV with text it wouldn't bring to front still. – jerdill Oct 07 '20 at 14:44
  • @jerdill - that is strange as I am able to highlight text within the windows, the only text I cannot highlight is the window title. But hey, I'm not denying there might be alternative ways to achieve what you're after! – Dexterians Oct 07 '20 at 22:10
0

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

jerdill
  • 13
  • 3