Virtuoso and Drag n Drop

[alexcorrea-hotmart]

Hi, I've started using Virtuoso because it's simple, fast, powerful and I'd like to build a list with drag and drop between the items. So, with React Beautiful DND, I've found this example https://virtuoso.dev/react-beautiful-dnd/ and I tried to reproduce it and, yes, it's worked fine! But, if I set the parameter useWindowScroll as prop of Virtuoso component, the drag and drop doesn't work anymore. Below, I'll show my entire code:

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Virtuoso } from 'react-virtuoso';

const TestList = () => {
  const [items, setItems] = useState(() => {
    return Array.from({ length: 100 }, (_, k) => ({
      id: `id:${k}`,
      text: `item ${k}`,
    }));
  });

  const reorder = React.useCallback((list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  }, []);

  const onDragEnd = React.useCallback(
    (result) => {
      if (!result.destination) {
        return;
      }
      if (result.source.index === result.destination.index) {
        return;
      }

      setItems(items => reorder(items, result.source.index, result.destination.index))
    },
    [setItems, reorder]
  );

  const Item = React.useMemo(() => {
    return ({ provided, item, isDragging }) => {
      // For borders and visual space,
      // use container with padding rather than a margin
      // margins confuse virtuoso rendering
      return (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
          style={{ ...provided.draggableProps.style, paddingBottom: '8px' }}
        >
          <div
            style={{
              border: `1px solid ${isDragging ? 'red' : 'black'}`,
            }}
          >
            {item.text}
          </div>
        </div>
      );
    };
  }, []);

  const HeightPreservingItem = React.useMemo(() => {
    return ({ children, ...props }) => {
      return (
        // the height is necessary to prevent the item container from collapsing, which confuses Virtuoso measurements
        <div {...props} style={{ height: props['data-known-size'] || undefined }}>
          {children}
        </div>
      );
    };
  }, []);

  return (
    <div>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable
          droppableId="droppable"
          mode="virtual"
          renderClone={(provided, snapshot, rubric) => (
            <Item provided={provided} isDragging={snapshot.isDragging} item={items[rubric.source.index]} />
          )}
        >
          {provided => {
            return (
              <Virtuoso
                components={{
                  Item: HeightPreservingItem,
                }}
                scrollerRef={provided.innerRef}
                useWindowScroll
                data={items}
                style={{ height: 500 }}
                itemContent={(index, item) => {
                  return (
                    <Draggable draggableId={item.id} index={index} key={item.id}>
                      {provided => <Item provided={provided} item={item} isDragging={false} />}
                    </Draggable>
                  );
                }}
              />
            );
          }}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default TestList;

Please, what am I doing wrong?

I'll appreciate your help!

[alexcorrea-hotmart]

Ops! I haven't seen this example https://virtuoso.dev/react-beautiful-dnd-window-scroller/ , my mistake!

[Tiffany-yuan]

May I ask how you solved that problem? I am currently facing the same problem, but this example is 404

[petyosi]

I have removed this example, as maintaining it turned into a nightmare I did not realize I was subscribing for. Here's its latest version: https://github.com/petyosi/react-virtuoso/blob/a00190351f70394c242106fc0d8709db18d7c170/docs/scenarios/react-beautiful-dnd-window-scroller.md, but I don't think it is functional. You may try to assemble something from it and the working example with the maintained fork of beautiful-dnd.