react-Beautiful DnD - 只能拖动可放置容器中的最后一项答案

【问题标题】：react-Beautiful DnD – can only drag last item in droppable containerreact-Beautiful DnD - 只能拖动可放置容器中的最后一项
【发布时间】：2021-12-01 14:07:48
【问题描述】：

我在我的 React 项目中使用 Beautiful DnD 并遇到了一个错误。只有可放置容器中的最后一个项目是可拖动的。当我单击其他项目时，它会给我一个“无法找到带有 id:id1 的可拖动项目”的警告。虽然当我添加一个新项目时，新项目也是可以拖放的。

这些是相关的代码片段： App.js - 可放置容器

<DragDropContext onDragEnd={onDragEnd}>
        <div className='flex flex-col items-center h-screen'>
          <Droppable droppableId='upflow' type={'ACTION'}>
            {(provided) => (
              <div
                ref={provided.innerRef}
                {...provided.droppableProps}
                className='flex flex-col justify-end flex-1 text-center action-container'
              >
                {upFlow &&
                  upFlow.map((actionId) => {
                    let action = flow.byId[actionId.id];
                    return (
                      <Action //..A LOT OF PROPS// />
                    );
                  })}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
....

Action.js - 可拖动项

<Draggable draggableId={actionId.id} index={indexInRenderOrder}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          className='flex justify-between my-1 overflow-hidden font-bold text-black group'
        >
          {/* onClick={handleMultiSelect} */}
          <div {...provided.dragHandleProps}>
            <MdDragHandle
              size={30}
              className={
                isInMultiSelect
                  ? 'bg-blue-200 h-10 mr-1'
                  : 'h-10 mr-1 bg-white group-hover:bg-blue-200'
              }
            />
          </div>
          //.....more Code//
        </div>
      )}
    </Draggable>

也许你们知道是什么原因造成的:)

另外：您可以推荐另一个也支持多拖的 DnD 库吗？

干杯

【问题讨论】：

标签： reactjs drag-and-drop

【解决方案1】：

我解决了这个问题！对于那些在同样问题上苦苦挣扎的人。

在Draggable，在(provided) => { ... }里面，在渲染item之前添加这行代码：

if (typeof provided.draggableProps.onTransitionEnd === "function") {
    queueMicrotask(() => 
        provided.draggableProps.onTransitionEnd?.({
            propertyName: "transform"
        })
    );
 }

我基于答案here（最初有错误）但为了避免错误，我基于解决方案here

我无法具体回答为什么会这样。我还没有找到原因。

【讨论】：