实现比较简单,就是将一个Droppable区域,分离成多个Droppable区域
实现思路
- 将初始数据列表list分离成多个数组list放在一个数组里lists,每个数组占一行,即一行展示的长度与数组长度相等
- 分离数组的时候记录每行的起始index(order),lists循环渲染
Droppable
组件,里面再循环渲染Draggable
组件。
分离后的数据结构:
lists: [
{
order: 0,
list: []
},
{
order: 4, // 一行4展示4个盒子
list: []
},
...
]
分离数据
const oneLineNum = 4; // 定义每行显示4个
const { list } = props; // list即为初始数据列表
const [ lists, setLists ] = useState([]); // 分离后的数组
useEffect(() => {
let i = 0;
let lists = [];
while(list[i]) {
lists.push({
order: i,
list: [...list.slice(i, i+oneLineNum)]
});
i+=oneLineNum;
}
setLists(lists);
// console.log(lists, i, list, 7777777)
}, [list]);
拖拽组件
<DragDropContext onDragEnd={handleDragEnd}>
{lists.map(item => { // 循环整合数组,渲染多个Droppable区域
return <Droppable droppableId={item.order + ''} direction="horizontal" key={item.order}>
{(provided, snapshot) => (
<div {...provided.droppableProps} ref={provided.innerRef} className={styles.imgContentBox}>
{item.list.map((l, index) => { // 循环每行的数据,下标为order+index
return (
<Draggable key={l.uuid} draggableId={l.uuid} index={item.order + index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div
className={styles.imgItem}
>
// 展示盒子
</div>
</div>
)}
</Draggable>
);
})}
</div>
)}
</Droppable>
})}
</DragDropContext>
代码里的uuid就是一个唯一值