Dragged item shows odd behavior when using nested sortables using dnd-kit

58 Views Asked by At

Using this example: https://codesandbox.io/p/sandbox/dndkit-drag-bug-6w8l6z?file=%2Fsrc%2FApp.js%3A92%2C20

Grab any item in the list (denoted by a common anime creature) and drag it along the block axis - you will see a red border appear on the over element - as you get to the halfway mark you will see the red border change to the container - as the over item changes to the SortableItem that represents the gray box (in my intended application - this is in turn sortable - hence the need to have this as a SortableItem) and the dragged item appears to disappear (it actually returns back to it's original starting position - but will continue to be dragged as normal if you continue to drag the item up or down the list.

The best I can tell is that the dnd-kit sensor is getting out of sync? and thinks the item is now over the underlying element - interestingly - this behavior does not go away when the SortableContext on lines 58-61 is commented (as i have it in the example, however commenting out the SortableItem at line 64 will "fix" it. As will reducing the number of items below 7.

0

There are 0 best solutions below