带有 react-beautiful-dnd 的 Mui TabList 不会在拖动时自动滚动

Question

我已使用react-beautiful-dnd 在 MUI 选项卡列表中添加了拖放功能。

代码 -

import * as React from 'react';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import Tab from '@mui/material/Tab';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { Draggable } from 'react-beautiful-dnd';
import { styled } from '@mui/material/styles';
import { Stack } from '@mui/material';

function DraggableTab(props) {
    return (
        <Draggable
            draggableId={`${props.index}`}
            index={props.index}
            disableInteractiveElementBlocking
        >
            {(draggableProvided) => (
                <div
                    ref={draggableProvided.innerRef}
                    {...draggableProvided.draggableProps}
                >
                    {React.cloneElement(props.child, {
                        ...props,
                        ...draggableProvided.dragHandleProps,
                    })}
                </div>
            )}
        </Draggable>
    );
}

const StyledTabList = styled(TabList)();
const StyledTab = styled(Tab)();

export default function DraggableTabsList() {
    const [value, setValue] = React.useState('1');

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    const [tabs, setTabs] = React.useState(
        [...Array(55)].map((_, index) => ({
            id: `tab${index + 1}`,
            label: `Tab ${index + 1}`,
            value: `${index + 1}`,
            content: `Content ${index + 1}`,
        }))
    );

    const onDragEnd = (result) => {
        const newTabs = Array.from(tabs);
        const draggedTab = newTabs.splice(result.source.index, 1)[0];
        newTabs.splice(result.destination?.index, 0, draggedTab);
        setTabs(newTabs);
    };

    const _renderTabList = (droppableProvided) => (
        <StyledTabList onChange={handleChange} variant="scrollable">
            {tabs.map((tab, index) => {
                const child = (
                    <StyledTab
                        label={tab.label}
                        value={tab.value}
                        key={index}
                    />
                );

                return (
                    <DraggableTab
                        label={tab.label}
                        value={tab.value}
                        index={index}
                        key={index}
                        child={child}
                    />
                );
            })}
            {droppableProvided ? droppableProvided.placeholder : null}
        </StyledTabList>
    );

    const _renderTabListWrappedInDroppable = () => (
        <DragDropContext onDragEnd={onDragEnd}>
            <div>
                <Droppable droppableId="1" direction="horizontal">
                    {(droppableProvided) => (
                        <div
                            ref={droppableProvided.innerRef}
                            {...droppableProvided.droppableProps}
                        >
                            {_renderTabList(droppableProvided)}
                        </div>
                    )}
                </Droppable>
            </div>
        </DragDropContext>
    );

    return (
        <TabContext value={value}>
            <Stack>{_renderTabListWrappedInDroppable()}</Stack>
            {tabs.map((tab, index) => (
                <TabPanel value={tab.value} key={index}>
                    {tab.content}
                </TabPanel>
            ))}
        </TabContext>
    );
}

工作代码框示例 - https://codesandbox.io/s/mui-tab-list-drag-and-drop-jceqnz

当标签被拖到可见列表的末尾时，我在使标签列表自动滚动时遇到问题。

此外，我尝试了一些技巧以使其工作 - see this，但我失去了滚动按钮，这是一个功能损失，并且不想要。由于自动滚动是标准的 d&d 功能，我希望必须有一些解决方案。能否请你帮忙？

谢谢！

Answer 1

首先感谢您提供如此优质的代码。我正在使用 react-beautiful-dnd 搜索 MUI 选项卡的实现，发现您的实现非常有帮助。

为了使其可滚动和可拖动，我删除了不必要的 div，它对我来说非常有用

这是我的代码的屏幕截图。

这是带有滚动的可拖动标签的图片