Issue with `useSortable` transforms being nulled for active item when dragged over a droppable outside the current SortableContext

[lueenavarro]

I made this very simple example. https://codesandbox.io/s/dnd-kit-sortable-example-c1gtn.

I can't seem to drag the item outside of its current droppable. I am reading the documentation but I can't find what's wrong with the code

[RomaricMourgues]

Hi, I just tried the same thing yesterday, in fact according to this example: https://github.com/clauderic/dnd-kit/blob/6f762a4d8d0ea047c9e9ba324448d4aca258c6a0/stories/2%20-%20Presets/Sortable/MultipleContainers.tsx

You need to put the containerA item into the containerB items list while dragging.

For instance if you have:

itemsA = [..., ..., myActiveItem];
itemsB = [..., ..., ...];
itemsC = [..., ..., ...];

When you drag myActiveItem over containerB you must do:

setItemsA(itemsA.filter(p => p != myActiveItem));
setItemsB([...itemsB, myActiveItem]);

You will find the corresponding code under onDragOver here: https://github.com/clauderic/dnd-kit/blob/6f762a4d8d0ea047c9e9ba324448d4aca258c6a0/stories/2%20-%20Presets/Sortable/MultipleContainers.tsx#L189

[lueenavarro]

Thank you that worked! But I am still getting some blinking when moving an item between containers. I am not sure why.

https://user-images.githubusercontent.com/47080916/118366189-488ea680-b5d2-11eb-9696-f0133dff3a89.mp4

[RomaricMourgues]

Actually I have the same issue ! If you find why it happens please share :)

[RomaricMourgues]

Well I have it, you need to use the "createPortal" part, it will be used as the dragged component instead of the real component in containers. See this lines: https://github.com/clauderic/dnd-kit/blob/6f762a4d8d0ea047c9e9ba324448d4aca258c6a0/stories/2%20-%20Presets/Sortable/MultipleContainers.tsx#L327

[lueenavarro]

Thanks, I am still having trouble making it work but that makes sense to attach the draggable in the document body.

[lueenavarro]

I was able to make it work without createPortal but I did use DragOverlay. Here's an example of it: https://codesandbox.io/s/github/lueenavarro/dnd-kit-sortable

[clauderic]

This is technically a bug with useSortable, but indeed as mentioned by @lueenavarro, you can solve this by using DragOverlay for the time being until this is resolved

[william-hotmart]

Can somebody help me with a difficulty? I see these examples where you can sort items in a container and move itens from one container to another. And that it's fine! But in my case the containers needs to be sorted too. Just like Trello does. So the container can be sorted, the products inside container too and products from can be move from one container to other. Could someone give me some help? I'm completely lost!

[KevinMusgrave]

This is technically a bug with useSortable, but indeed as mentioned by @lueenavarro, you can solve this by using DragOverlay for the time being until this is resolved

@clauderic How complicated would the bug fix be? Is there a specific place in the code I could look?

[bihtyu]

check id type. useSortable({ id }) and 《SortableContext items={ids} /》, id and ids type must be string.