My task is to implement 2 lists. One of the lists is just a “toolbar” that contains items. Also, from this list, you can drag items to the second list, which is the “target”. It will not be possible to drag items from the target list to the other, but in the future I want to make it possible to delete items. The main task of the target list is the ability to sort items by dragging (taking into account the position the cursor is hovering over).
I implemented this functionality in some form, but ran into some problems. I solved the first one (it’s pretty ugly, but it works). And with the second one, unfortunately, I could not figure out on my own. The problem is that after adding an item to the middle of the list, strange behavior occurs – it is impossible to drag the next item to a certain position. I tried to figure it out and looked at the logs. I saw that targetItemRefs.current is not updated properly. After that, I tried to update it manually in the onReorderTarget() function. But this was also unsuccessful. Here is a reproducible example of my problem: sandbox