Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
paul_ngc

Draggable zIndexBoost triggered from external button

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?

Share this post


Link to post
Share on other sites

Hi paul_ngc :)

 

you can set draggable zIndexBoost:false and use something like this to set items zIndex 

TweenLite.set([item1,item2,item3],{zIndex:999});

Share this post


Link to post
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?  :)

Share this post


Link to post
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. 

Share this post


Link to post
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. :)

Share this post


Link to post
Share on other sites

I thought I could add a class for the 'blue' - check for that on the press and send it down the stack if you weren't clicking on blue, but my check for .hasClass is not working. 

 

I see the awesome Blake is here now.

 

@Blake - why won't this work?  :unsure:

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Good grief - that is a pretty easy solution you have there. 

 

Well, the more I fall down, the more I learn. :)

 

You're the man, Blake.

  • Like 1

Share this post


Link to post
Share on other sites

Draggable has zIndex property , so you can simply do this :

Draggable.create('.draggable');

document.getElementById('btn').addEventListener('click',function(){
  TweenLite.set('#orange',{zIndex:Draggable.zIndex++})
})

pls check this out : 

See the Pen 9669513a27014a424f2fed07978ba6c8 by MAW (@MAW) on CodePen

  • Like 3

Share this post


Link to post
Share on other sites

So easy & simple, but so cool Diaco. Very nice. :)

  • Like 1

Share this post


Link to post
Share on other sites

I totally forgot about that.

Share this post


Link to post
Share on other sites

Wow! This community is really helpful :)

Thanks to everybody for all working suggestions. I've marked the solution from Diaco, because I've used that code. 

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×