我有一个正在使用PropertyGroup和launchSettings.json构建的小应用程序。
我正在尝试弄清楚为什么无法在下面的示例应用程序中对行进行重新排序。当窗口宽度为中等到较小时，会发生此问题。
可以在此处找到一个实时示例：https://codesandbox.io/s/dnd-mui-scrollable-table-80s5u
material-ui问题似乎在于可滚动的beautiful-react-dnd元素。
当我删除import React, { useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
function App() {
const [countries, setCountries] = useState([
"Belgium",
"France",
"Netherlands"
]);
function handleDragEnd({ source, destination }) {
if (!destination) {
return;
}
if (source.index === destination.index) {
return;
}
setCountries(prevCountries =>
move(prevCountries, source.index, destination.index)
);
}
function move(arr, from, to) {
const clone = [...arr];
Array.prototype.splice.call(
clone,
to,
0,
Array.prototype.splice.call(clone, from, 1)[0]
);
return clone;
}
return (
<Paper style={{ overflow: "auto", padding: 20 }}>
<DragDropContext onDragEnd={handleDragEnd}>
<Table>
<TableHead>
<TableRow>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
<TableCell>Column</TableCell>
</TableRow>
</TableHead>
<Droppable droppableId="table">
{droppableProvided => (
<TableBody
innerRef={droppableProvided.innerRef}
{...droppableProvided.droppableProps}
>
{countries.map((country, index) => (
<Draggable draggableId={country} index={index} key={country}>
{(provided, snapshot) => (
<TableRow
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
isdragging={snapshot.isdragging}
style={{
...provided.draggableProps.style
}}
>
<TableCell>{country} 1</TableCell>
<TableCell>{country} 2</TableCell>
<TableCell>{country} 3</TableCell>
<TableCell>{country} 4</TableCell>
<TableCell>{country} 5</TableCell>
<TableCell>{country} 6</TableCell>
<TableCell>{country} 7</TableCell>
<TableCell>{country} 8</TableCell>
<TableCell>{country} 9</TableCell>
<TableCell>{country} 10</TableCell>
<TableCell>{country} 11</TableCell>
<TableCell>{country} 12</TableCell>
<TableCell>{country} 13</TableCell>
<TableCell>{country} 14</TableCell>
<TableCell>{country} 15</TableCell>
<TableCell>{country} 16</TableCell>
<TableCell>{country} 17</TableCell>
<TableCell>{country} 18</TableCell>
<TableCell>{country} 19</TableCell>
<TableCell>{country} 20</TableCell>
</TableRow>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</TableBody>
)}
</Droppable>
</Table>
</DragDropContext>
</Paper>
);
}
样式时，拖放工作正常。
由于这是一张大桌子，因此我希望保持水平滚动完整。
此外，文档似乎建议拥有一个可滚动的父级应该没问题。
非常感谢您的帮助。