react-beautiful-dnd：防止其余可拖动项目重新排序/向上移动并替换被拖动的项目

问题描述

在单个 Droppable 中，我绘制了一系列项目，每个项目都作为自己的 Draggable。我的代码工作正常并且正在做它应该做的事情（即，我可以单独移动每个 Draggable）。我只是想知道是否有办法阻止我的其余 Draggables“向上移动”或替换被拖动的项目留下的空白点。

这是我的代码（DragDropContext 在另一个组件中，所以这里没有显示）：

<Droppable
    droppableId='itemDroppable'
    type='acceptsItems'
    isDropDisabled={true} >
    {(provided) =>
        <div ref={provided.innerRef}>

            {this.props.items.map((item,index) =>
                <Draggable
                    key={item.id}
                    draggableId={item.name}
                    index={index} >
                    {provided =>
                        <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps} >
                            {item.icon}
                        </div>
                    }
                </Draggable>
            )}
        
            {provided.placeholder}

        </div>
    }
</Droppable>

这是正在发生的事情的视频：

如您所见，以下其余图标向上移动并替换了被拖出 Droppable 的项目留下的空白点。有没有办法阻止这种情况？理想情况下，我希望空白位置保持空白，而不是让其他进行中的图标向上移动并填满。

先谢谢你！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）