Plugin Draggable Elements - Drag getting behind the other Drag

Need help Plugins
1

I have 2 Drags, where I place Drag 1 in front of everything, and Drag 2 behind Drag 1

If I drag at least 1 pixel from Drag 1, Drag 1 ends up in front of everyone, not respecting what was done in the Bubble editor

This has been happening for many years, and I have never seen anyone comment on it. I searched the forum and no one has ever talked about it. Even though it’s something that shouldn’t happen, and it greatly hinders the system’s use, since the customer opens a window and doesn’t see the open window because it stayed behind (even configured to always stay in front)

If I have returned to Drag 1 (which must always stay behind) and clicked an option to open Drag 2 (which must always stay in front), what’s the difficulty for Drag 2 to stay in front???

Just because I dragged 1 pixel from Drag 1, it immediately moves in front of the new Drag that I opened.

It would make sense if both Drags are open, and the one I click on goes to the front, then fine!
But if Drag 2 is closed, there is only Drag 1, and if I click on Drag 1 to open Drag 2, it should open! This is so obvious

2

Demo link: https://drag-test-73420.bubbleapps.io/version-test?debug_mode=false

3

In the element tree make sure the draggable you want in front is below the other.

4

I explain this several times in the message above…

That’s very clear. That even placing the element FRONT, it goes BACK.

In fact, I even created an example that is in the link above. It’s very easy for you to enter and test in 10 seconds

5

My point was to check if the element is below the other one in the element tree.

If you are not happy with my response then i wish you all the best because i already apply a workaround for this issue in all my apps.

1 Like
6

How can you respond to something you read?

This is very clear in my post. I say this several times… And I even set an example.

I don’t understand why it’s difficult for you to read before responding.

Of course I’m dissatisfied with your answer, because it asks me something that I’ve already made clear several times

7

up…
up…

8

up…
up…

9

I guess the first thing you should know in the forum is: don’t be mean to the people who are trying to help you. You may not get an answer next time.

About your problem, I think you will need custom HTML for it. I have created the following custom HTML which brings the one you are dragging to the front and all the others to back. You can play with it and try to create some custom settings for your case. I put it here for inspiration.

Here is a demo:
chrome_9LJfEMNHxM

Here is the HTML element code you need to create:

<script>
   $(function () {
       $(".ui-draggable").each(function(){
           $(this).css("z-index",0);
           $(this).draggable({
               start: function () {
                   $(".ui-draggable").each(function(){
                       $(this).css("z-index",0);
                   });
                   $(this).css("z-index", 1);
               },
               stop: function () {
                   $(".ui-draggable").each(function(){
                       $(this).css("z-index",0);
                   });
                   $(this).css("z-index", 1);
               }
           });
       });
   });
</script>

And here is the editor if you want to play it yourself: Test for Forum 12 | Bubble Editor