Jump to content
Search Community

Draggable and containers

EricMtl test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi all,

I use Draggable in order to drag an element (a playing card) from a container ( a shoe) to another (a mat). I'm not the first to do that, for sure, ;)

I set the  bounds property to .mat class that contains the shoe

Dragging works inside the shoe but the card is cropped and seems to disappears under the mat, as soon as It move outside the shoe...

 

Any clue ?

 

Eric

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

OK. Sorry for the sample.

Can you confirm if the following Diaco 's sample still working fine in  GSAP 3 ?

In my Svelte adaptation, the yellow child element is disappearing behind the white background as soon as it gets out its red parent... Thx!

 

 

Eric

Link to comment
Share on other sites

Wow ! Thank you Jack for your confirmation ! Impressive how it sounds easy!

 It seems  that context plays an important role and z-index plays none...

Just one more question (if I can.. ) : Will both elements will always stay soldered as they were defined into embedded <div> or is there a way to drag each separately (i.e move the red container  without moving yellow element when the latest is outside) ?

 

Thx again !

 

Eric

Link to comment
Share on other sites

I don't really understand what you mean by any of the following: 

  1. "...always stay soldered" (do you mean drag as one?)
  2. "...when the latest is outside" (outside what? and what is "latest"?)

If you move a parent element, of course all of its children inside of it would come with it. Are you asking if you can drag a parent and make it look like the child is not coming with it? If so, yes, you'd have to counter-move the child. So if you move the parent 100px to the right, you'd have to simultaneously move the child element 100px to the left. 

 

Wouldn't it be much easier to just make them siblings and then if you want one to drag along with the other, you'd just apply the same offsets in an onDrag to the other (connected) one? 

Link to comment
Share on other sites

Thank's for your time Jack. Maybe my translator was not so reliable :) Sorry for that.

 

I'm just trying to consider the red element as a "container/vehicle" to the yellow one.

 

In my case, the card no longer "belongs" to the shoe  when dragged onto the mat. Then, the shoe can be dragged independently of the card. But it becomes part to the shoe when it is placed back in it.

Your explanations lead me to think that it is easier to have the opposite approach:
- always consider the card as independent from the shoe (even if visually they're into it)
- propagate dragging to a collections of elements that the shoe is supposed to contain (a set of cards, in my case) when I want to drag the shoe.

 

Eric
 

Link to comment
Share on other sites

Hi,

 

I'm not sure I follow what you're asking for. I assume that you want the child element to not move if the parent is dragged but the child is inside another element? For that you can use Draggable's hitTest() method:

https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest()

 

I created a fork of Jack's codepen:

See the Pen rNqGQNo by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Yesss!   I think it'd be a win if I can add the same mechanism in the other way (i.e reincorporate the child back to its red parent)

Many thx to you both for your help and expertise

 

Eric

Link to comment
Share on other sites

I suppose you see it...

So it may be easier for you  to understand that:

- cards into the shoe move with the shoe when the shoe is drag

and

- cards must not move with shoe when card in on the mat.

and

- card must move again with the shoe when that card is back to the shoe.....

 

So, in that context, is my approach realistic or counter-intuitive ?

Thank you

 

Eric

Link to comment
Share on other sites

  • Solution

Hi,

 

I updated the codepen example:

See the Pen rNqGQNo by GreenSock (@GreenSock) on CodePen

 

This should provide a good starting point. Unfortunately we don't have the time resources to provide anything beyond this, so you'll have to come up with the rest in order to create a more robust and complete solution.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

🎖️ 🎖️ !!!!! Thank you Rodrigo !! That's what I was looking for.  I was actually revisiting my code considering hitTest(), and this third code suggestion should be enough for me to see the light ...and the right way to drag !!


Thx again to you and Jack for your time

 

;)

 

Eric
 

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...