aleks-webby Posted May 16, 2022 Share Posted May 16, 2022 At the moment, I have discovered the following problem. There is a project on the React. There's a list of items that should be sortable. And when dragging an element at the moment when it is hovered over another, the dragging stops. For example, I want to drag the topmost, very first item down through the entire list. I take the first item and start dragging it down through the entire list. I expect it to drag. But as soon as it is hovered over the next element, the list is redrawn and the element is replaced with the neighboring one and the dragging stops. I believe this is due to the fact that when the element is redrawn, the listeners are reset and a new list appears with new drag handlers and the ui is brought to the default state and the dragging is interrupted.https://codesandbox.io/s/cranky-babbage-2467p9?file=/src/item.js See the Pen item.js by s (@s) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 17, 2022 Share Posted May 17, 2022 I'm definitely not a React guy, but it looks to me like the problem is that you're basically having React re-render the list when you sort it and that of course interrupts the dragging and you're no longer dragging the same element (since React re-rendered a new one?) This is more of a React question that a GSAP one. It seems to me like you should restructure things so that it's not re-rendering elements mid-drag. Maybe a React expert could chime in - we really specialize in GSAP questions in these forums, not React ones. Link to comment Share on other sites More sharing options...
Alexygen Posted May 18, 2022 Share Posted May 18, 2022 Hi! I have the same problem! Is there a solution? I’m just choosing a framework for animation in the project, if this problem is solved, then I’ll buy a license and start using Link to comment Share on other sites More sharing options...
GreenSock Posted May 18, 2022 Share Posted May 18, 2022 From what I can tell, this is a React issue and has nothing to do with GSAP/Draggable. We don't have the resources to provide free consulting to rework React-based logic in projects - these forums are for GSAP-specific questions which we're happy to help with. 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