EricMtl
EricMtl's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Rare
Recent Badges
1
Reputation
-
?️ ?️ !!!!! 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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
Thank's Rodrigo ! I understand. However, it could be hardcoded as what I need is not really dynamic (the depth may be fixed and no need to add/delete items on the fly...). I just plan to put items description into a JSON/XML file but this could be done later. For me, the main issue is to imagine a recursive GSAP visual effect for options (button ?) that leave room for the following ones and so on... Something like that! Eric
-
Hello all, Do you know where I can find samples of (or get clues to build a) menu fed by few levels deep JSON files and "scrolling" between levels ? By scrolling, I mean moving in order to keep only two or three last levels on the same space at screen. We could find many of these in Flash/AS good ol'days... Thank for your help! Eric
-
Ooch ! My eyes betrayed me... I must admit that I spend too long time on this bug without a break... Again, thank you all for your assistance and your responsiveness.
-
I rapidly checked sources codes and relocated included script files to the end of <body> . For the same index.html file , seems that all depends of these paths.... That sequence works <!-- <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script> <script type ="text/javascript">src="InertiaPlugin.min.js"</script> <script type ="text/javascript" src="index.js"></script> --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script> <script src="./index.js"></script> </body> That one fails <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script> <script type ="text/javascript">src="InertiaPlugin.min.js"</script> <script type ="text/javascript" src="index.js"></script> <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script> <script src="./index.js"></script> -->
-
-
Pfff ! I registered to CodePen and dl'ed the zip file. Finally the /dist folder (not the /src one) content works !!! Thank you for your help.
-
Yes exactly! But I didn't noticed this option... So I need to subscribe to retrieve all complete samples... Thank you for that !