Reactjs 当每个元素都可拖动时，移动设备上的滚动列表出现问题

在列表元素上设置免打扰后，我在移动设备上滚动列表时遇到了问题.

我有一张卡片 list .我希望每一张牌都是可拖拽的.

我使用了TouchAction:‘None’，如果没有它，在不拖动的情况下滚动是有问题的:滚动时手指下的卡片也在拖动.现在，拖拽行得通，但滚动行不通.

这是我的代码:

export const CardComponent = forwardRef((props: CardComponentProps) => {
  const { style, attributes, listeners, setNodeRef } = props;

  const onCardClick = () => {};

  return (
    <div style={style} {...attributes} {...listeners} ref={setNodeRef as React.ForwardedRef<HTMLDivElement>}>
      <Card onClick={onCardClick}>{/* ...content */}</Card>
    </div>
  );
});

export const SortableItem = ({ id }: SortableItemProps) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    touchAction: 'none',
    zIndex: isDragging && 35,
  };

  return (
    <Wrapper className="mt-5">
      <CardComponent setNodeRef={setNodeRef} style={style} attributes={attributes} listeners={listeners} />
    </Wrapper>
  );
};

export const Dropable = ({ lists, handleDragEnd }: DropableProps) => {

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  return (
    <Wrapper>
      {lists && (
        <DndContext
          sensors={sensors}
          collisionDetection={closestCenter}
          onDragEnd={handleDragEnd}
          modifiers={[restrictToVerticalAxis, restrictToFirstScrollableAncestor]}
        >
          <SortableContext items={lists?.map((item) => item.Id as string)} strategy={verticalListSortingStrategy}>
            {lists?.map(({ Id: id }) => {
              return <SortableItem key={id} id={id as string} />;
            })}
          </SortableContext>
        </DndContext>
      )}
    </Wrapper>
  );
};

我试着把拖拽按钮放在按钮上，只放了TouchAction:‘None’，但 comments 者不接受.这张卡必须没有按钮，因为它太小了，放不下按钮.