react-beautiful-dnd 多行拖拽

实现比较简单，就是将一个Droppable区域，分离成多个Droppable区域

实现思路

1. 将初始数据列表list分离成多个数组list放在一个数组里lists，每个数组占一行，即一行展示的长度与数组长度相等
2. 分离数组的时候记录每行的起始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就是一个唯一值