Jump to content
Search Community

Draggable zIndexBoost triggered from external button

paul_ngc test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space.

 

Is this possible?

Link to comment
Share on other sites

Hi paul_ngc :),

 

Depending on what you're doing, you could set zIndexBoost to false, but that may not give you the result you like.

 

You can certainly set the z index of a single element with a button click. Draggable defaults to a z-index of 1000 so you could just set the element's z-index higher than that.

 

In my codepen below, you can drag the orange and green squares on top of the blue, but click the button and the blue will jump to the top.

 

See the Pen NGQxqv by PointC (@PointC) on CodePen

 

Is that the behavior you were looking for?  :)

Link to comment
Share on other sites

Hi Diaco and PointC,

 

thank you for your ideas. Now I can explain better what the problem is.

 

When I give a z-index value by hand it will be on the top. But this value is not working together with the zIndexBoost. When I click the button (codepen from PointC) the blue on gets on top. When I start dragging the other they won't get to the top. Unless I start dragging the blue one the z-index gets set by the zIndexBoost and the other ones can get on top when I interact with them.

 

I'm not sure if this is somehow possible, but the 'cleanest' for me would be when I click the button and the draggable item would be like 'active' and gets the correct z-index from the zIndexBoost. 

Link to comment
Share on other sites

you can just send the 'blue' box back down the stack on press. :)

 

See the Pen EVqPbB by PointC (@PointC) on CodePen

 

 

edit: whoops - that won't quite work since the 'blue' would cause the onPress to fire as well and stay below the other elements. I'm headed out for the evening so I'll think about this a bit, but more than likely, Diaco will be by with a much better solution than mine while I'm gone. He's pretty incredible. :)

Link to comment
Share on other sites

It's not working because you aren't keeping the z-index increase uniform between the different draggables. So the blue one is either going to have a z-index of 999 or 2000, while the other draggables are going to be increasing from 1000.

 

The fix to this is really easy. Just keep a variable with a z-index value on it that increases on every press, either through a button or the draggable itself.

 

See the Pen 4c7fd229860f8df24060bd10978eb675?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...