Not displaying preview of the dragging item when in a virtualized list

[danglduy]

I'm having an issue of displaying the preview of a dragging item in a virtualized list.

It's when I removed this line

dnd-kit/stories/2 - Presets/Sortable/5-Virtualized.story.tsx

Line 91 in 05d6a78

opacity: id === activeId ? 0 : undefined,

After dragging and scrolling passes the initial view, the preview of the dragging item will be disappeared.

I am using latest versions:

• @dnd-kit/core 4.0.3
• @dnd-kit/sortable 5.1.0

Demo

dndkit_disappeared_drag_preview_virtualized_list.mp4

[clauderic]

This isn't a bug with @dnd-kit, this is just how virtualized lists work. When items scroll out of view, they get unmounted by the virtual list component.

If you're using react-tiny-virtual-list, you can use the stickyIndices prop to prevent the item from unmounting when it goes off screen:

<VirtualList
  stickyIndices={activeId ? [items.indexOf(activeId)] : undefined}

[hanmaker-s1]

This isn't a bug with @dnd-kit, this is just how virtualized lists work. When items scroll out of view, they get unmounted by the virtual list component.

If you're using react-tiny-virtual-list, you can use the stickyIndices prop to prevent the item from unmounting when it goes off screen:

<VirtualList
  stickyIndices={activeId ? [items.indexOf(activeId)] : undefined}

If using another virtual library such as react-virtuoso, is there a solution for https://github.com/dnd-kit?