react-beautiful-dnd 实现树形分组拖拽的探索

• 培养计划树可以有无数层嵌套
• 可能拖拽前后父元素不再是先前那个父元素，需要区分父元素有无变化的情况
• 可能拖拽前后被拖拽的组件在树中的层次发生了变化
• 由于课程不可能再包含课程，所以只有课程类别才能作为容器被拖拽子元素

javascriptCopy
const trees = [
  {
    rootId: "5c91cba358267312089b8696",
    items: {
      "5c91cba358267312089b8696": {
        id: "5c91cba358267312089b8696",
        hasChildren: true,
        isExpanded: false,
        isChildrenLoading: false,
        data: {
          name: "Near Kiley's Run.",
          id: "5c91cba358267312089b8696",
        },
        children: ["5c91cba658267312089b8699"],
      },
      "5c91cba658267312089b8699": {
        id: "5c91cba658267312089b8699",
        hasChildren: false,
        isExpanded: false,
        isChildrenLoading: false,
        data: {
          name: "What should he live for?  A dull despair",
          id: "5c91cba658267312089b8699",
        },
        children: [],
      },
    },
  },
  {
    rootId: "5c91cbba58267312089b86cb",
    items: {
      "5c91cbba58267312089b86cb": {
        id: "5c91cbba58267312089b86cb",
        hasChildren: true,
        isExpanded: false,
        isChildrenLoading: false,
        data: {
          name: "They were outlaws both -- and on each man's head",
          id: "5c91cbba58267312089b86cb",
        },
        children: ["5c91cbbd58267312089b86ce"],
      },
      "5c91cbbe58267312089b86d3": {
        id: "5c91cbbe58267312089b86d3",
        hasChildren: true,
        isExpanded: false,
        isChildrenLoading: false,
        data: {
          name: "Some large tomatoes, rank and stale,",
          id: "5c91cbbe58267312089b86d3",
        },
        children: ["5c91cbf758267312089b873f", "5c91cbf858267312089b8744"],
      },
    },
  },
];

jsxCopy
const PaintTree = (props) => {
  return (
    <Droppable droppableId={props.droppableId}>
      {(provided, snapshot) => {
        return (
          <section
            ref={provided.innerRef}
            {...provided.droppableProps}
            style={getListStyle(snapshot.isDraggingOver)}
          >
            <section>{provided.placeholder}</section>
            {props.children?.length > 0 && (
              <section>
                {props.children.map((id, idx) => (
                  <Draggable key={id} draggableId={id} index={idx}>
                    {(provided, snapshot) => {
                      return (
                        <section
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                          )}
                        >
                          <PaintTree
                            key={id}
                            droppableId={id}
                            {...treeData[id]}
                          />
                        </section>
                      );
                    }}
                  </Draggable>
                ))}
              </section>
            )}
          </section>
        );
      }}
    </Droppable>
  );
};

return (
  <section>
    <DragDropContext onDragEnd={onDragEnd}>
      <PaintTree
        {...treeData[exampleTreeData[0].rootId]}
        droppableId={exampleTreeData[0].rootId}
      />
    </DragDropContext>
  </section>
);

jsonCopy
{
  // 被拖拽的item的id
  "draggableId": "5c91cbb558267312089b86c6",
  "source": {
    // 原父元素id
    "droppableId": "5c91cba658267312089b8699",
    // item原来所在idx
    "index": 1
  },
  // 若没有正确拖拽到容器，则destination=null
  "destination": {
    // 新父元素id
    "droppableId": "5c91cbaa58267312089b86a8",
    // item新所在idx
    "index": 0
  }
}

jsxCopy
const handleMove = (item) => {
  const { destination, source, draggableId } = item;
  // 没有正确拖拽到容器，则不作移动
  if (!destination) return;
  let newTreeData = treeData;
  newTreeData[source.droppableId].children.splice(source.index, 1);
  newTreeData[destination.droppableId].children.splice(
    destination.index,
    0,
    draggableId
  );
  setTreeData(newTreeData);
};

const onDragEnd = (e) => {
  handleMove(e);
};

• 组件被拖拽时，虽然感应区域高亮行为正常，最后拖拽的结果也与高亮行为一致，但组件本身位置常常会发生突变，离鼠标有一定距离，但鼠标若离开所有拖拽的容器，则被拖拽组件又紧跟鼠标移动，用户体验感很奇怪
• 希望将组件拖拽到两个容器之间的位置时，多数情况下两个容器并不会自动拉开距离，而是将拖拽行为识别为放入两容器中的一个

provided.placeholder: This is used to create space in the <Droppable /> as needed during a drag. This space is needed when a user is dragging over a list that is not the home list. Please be sure to put the placeholder inside of the component for which you have provided the ref. We need to increase the size of the <Droppable /> itself.

jsxCopy
const PaintTree = (props) => {
  return (
    <Droppable
      droppableId={props.droppableId}
+     isDropDisabled={!props.hasChildren||props.isDragging}
    >
      {
        (provided, snapshot) => {
          return (
            <section
              ref={provided.innerRef}
              {...provided.droppableProps}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              <section>
                {props.data.name}
              </section>
              {
                props.children?.length > 0 &&
                  <section>
                    {props.children.map((id,idx)=>
                    <Draggable key={id} draggableId={id} index={idx} >
                      {
                        (provided, snapshot)=>{
                          return (
                            <section
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              style={getItemStyle(snapshot.isDragging,provided.draggableProps.style)}
                            >
                              <PaintTree
                                key={id}
                                droppableId={id}
+                               isDragging={snapshot.isDragging||props.isDragging}
                                {...treeData[id]}
                              />
                            </section>
                          )
                        }
                      }
                    </Draggable>
                    )}
                  </section>
              }
              {provided.placeholder}
            </section>
          )
        }
      }
    </Droppable>
  )
}

We leave elements in place when dragging. We apply position: fixed on elements when we are moving them around. This is quite robust and allows for you to have position: relative | absolute | fixed parents.

jsxCopy
const PaintTree = memo((props) => {
  return (
    <Droppable
      droppableId={props.droppableId}
+     renderClone={
+        (provided, snapshot, rubric) => {
+          // rubric中涵盖了被拖拽的元素id与其父容器的信息
+          return (
+            <div
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+              ref={provided.innerRef}
+              style={{
                // 因为provided.draggableProps中有style属性，存放了拖拽动效与组件计算好的当前的坐标，如果直接覆盖的话会导致拖拽行为出错
+               ...provided.draggableProps.style,
+               ...getItemStyle(true)
+             }}
+           >
+             {treeData[rubric.draggableId].data.name}
+           </div>
+         )
+       }
+     }
    >
      {/* ... */}
    </Droppable>
  )
})