EricMtl Posted April 30, 2023 Share Posted April 30, 2023 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 More sharing options...
GSAP Helper Posted May 1, 2023 Share Posted May 1, 2023 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 More sharing options...
EricMtl Posted May 1, 2023 Author Share Posted May 1, 2023 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 More sharing options...
GreenSock Posted May 1, 2023 Share Posted May 1, 2023 Yep: https://stackblitz.com/edit/vitejs-vite-b7vvyn?file=src%2FApp.svelte See the Pen zYmEZpz by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
EricMtl Posted May 2, 2023 Author Share Posted May 2, 2023 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 More sharing options...
GreenSock Posted May 2, 2023 Share Posted May 2, 2023 I don't really understand what you mean by any of the following: "...always stay soldered" (do you mean drag as one?) "...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 More sharing options...
EricMtl Posted May 2, 2023 Author Share Posted May 2, 2023 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 More sharing options...
Rodrigo Posted May 2, 2023 Share Posted May 2, 2023 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 More sharing options...
EricMtl Posted May 2, 2023 Author Share Posted May 2, 2023 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 More sharing options...
EricMtl Posted May 2, 2023 Author Share Posted May 2, 2023 I finally could drop my code to Stackblitz... https://stackblitz.com/edit/vitejs-vite-abcfjy?file=src%2Fmain.js,index.html Let me know if it appears... Eric Link to comment Share on other sites More sharing options...
GreenSock Posted May 2, 2023 Share Posted May 2, 2023 Did you have a question, @EricMtl? Was there something you needed help with in that demo? Link to comment Share on other sites More sharing options...
EricMtl Posted May 2, 2023 Author Share Posted May 2, 2023 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 More sharing options...
Solution Rodrigo Posted May 3, 2023 Solution Share Posted May 3, 2023 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 More sharing options...
EricMtl Posted May 3, 2023 Author Share Posted May 3, 2023 🎖️ 🎖️ !!!!! 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now