Cannot drag a sortable item into a container with an empty list

[ae4sri]

Reproduced code: https://codesandbox.io/s/headless-breeze-wswqlm?file=/src/Container.js

Very new to drag and drop, and I've been trying to implement this interface using your library for a few days now. I've been running into an issue with not being able to drag an element into an area that doesn't contain any elements in it (I'm using the Sortable preset). I've tried to clarify this better in the codesandbox. I'm sure this is my own wrongdoing and not the libraries, but I'd really appreciate some help regardless. Thanks for reading and creating this library!

[sbesh91]

Line 126 is your issue here. if (overId in prev) Essentially you're trying to use the in operator a bit wrong here. What this amounts to is 4 in [{id: 4}, {{id: 5}}] Here's the mdn that describes how to use in correctly. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

[omridevk]

As far as I can see, since there are not over sortable items, you need to somehow differentiate between empty container, by making the container have data that says it is container, and use findContainer and find the right container not based on item ID but rather on the ID of the container, "available" or "final" you can see that in the example of the repo: https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/MultipleContainers.tsx

[ae4sri]

Thanks for the responses. I'm pretty sure you're right @omridevk and it's an issue with not differentiating between an empty/non-empty container. Thanks for the help!

[milyopena]

I'm having same issues, were you able to differentiate the empty to non-empty container? thanks

[stephen-leisy]

I realize im about two years too late here, but since I was having the same issue and just fixed it, I might as well point out that in this example the ref from the useDroppable hook is being used within an instance of the container component instead of in the wrapper surrounding the containers. As such, when items are not present in that container, it will not recognize the container id when hovered over. You would have to refactor this sandbox a bit to get it set up, but moving that ref to the outermost draggable area wrapper should do the trick.

Check out how they pull in the ref from the useDroppable hook in this sandbox: https://codesandbox.io/p/sandbox/dnd-kit-nested-containers-forked-d5zmv7?file=%2Fsrc%2Fcontainer.js%3A51%2C32