Everything posted by Asderex
Thank you @Rodrigo for pointing me in the right direction and @OSUblake for getting me over the line. Looking at the forums and I have to say GSAP has a very helpful community here.
Thank you both for coming back with suggestions! I looked into forwarding refs (great suggestion). I was worried about putting behavior/logic related to the children into the parent component so I thought I could create a forwarded ref for the parent component and pass this same ref down to the children to use as the "bounds" property. Demo. I think that in my original example the Draggables were being created before the DOM was actually rendered. The elements therefore didn't exist which is why @OSUblake noted he couldn't see the parent element being passed down. The new solution is showing the correct DOM element in the console but I still seem to be getting the same weird drag result (exactly 4 x the area of the draggable div's centered on screen). I could try your original suggestion @Rodrigo (forward refs from the parent to the children and define the draggable in the parent) but I'm not sure how to handle the case of an arbitrary and dynamic number (and type) of children being added to the draggable area i.e. Could be 4 squares, then 2 Circles could be added, the 3 triangles....it can't be defined at design time. And apologies - I had it in my head that the second example in my original post was a nested react component but it's not, it's just a single component so I don't think the class / functional debate comes into it. Thanks again for your suggestions.
Hi Just discovered GSAP and what a great library it is! I am having a problem with bounding my draggable components in my React testing. I have followed the great instructions found here (https://greensock.com/react) to get a reference to the React generated DOM element and haven't had any problems making them draggable. The draggables sit inside of another React component which should act as the bounding element. I am again getting a reference to this element as previously described and passing this into the draggable components as props - to be referenced by the draggable childrens draggable.create. This works (in that it doesn't throw any errors and my console logs are showing the correct DOM element being passed in) but the draggable bounds are behaving very oddly. A demo paints a million words so you can see what I mean here (I'm a bit more comfortable in codesandbox.io): The draggable elements appear to be bounded by something (not a DOM element I recognise) that is exactly 4 times their size and not their parent component? I have seen demo's, such as this one where they are successfully bounding a child react component in its parent. The only obvious difference to me appears to be the use of a class component over a functional component but, again, I'm not sure why that would make a difference? Note: I'm not adverse to using a class component but would love to understand why this is behaving the way it is. Any tips or suggestions welcome!