React sortable list

[aleks-webby]

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

[GreenSock]

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. 

[Alexygen]

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

[GreenSock]

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.