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

【问题标题】：react-beautiful-dnd: Prevent the rest of draggable items from reordering / moving up and replacing the item being draggedreact-beautiful-dnd：防止其余可拖动项目重新排序/向上移动并替换被拖动的项目
【发布时间】：2021-01-25 21:09:49
【问题描述】：

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

这是我的代码（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 的项目留下的空白点。有没有办法阻止这种情况？理想情况下，我希望空白处保持空白，而不是让其余的进行中的图标向上移动并填满。

提前谢谢你！

【问题讨论】：

标签： javascript reactjs draggable droppable react-beautiful-dnd

【解决方案1】：

我没有直接的解决方案，但我有一个可以解决此问题的想法。
当您使用 Array.map() 函数显示项目时

首先：假设我们向对象添加一些附加信息以跟踪它是否被删除。添加一个条件，以便在标志为真时呈现元素。否则，将显示隐藏元素。 注意：我不确定，但我认为您可以使用 provide.placeholder
例如：

{(provided) => (
        <div ref={provided.innerRef}>
            {this.props.items.map((item, index) => {
                if (item.id !== 0) {
                    return (
                        <Draggable
                            key={item.id}
                            draggableId={item.name}
                            index={index}
                        >
                            {(provided) => (
                                <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                >
                                    {item.icon}
                                </div>
                            )}
                        </Draggable>
                    );
                } else
                    return (
                        <div style={{ width: '20px', height: '20px' }} /> //display hidden undraggable hidden element or try provided.placeholder
                    );
            })}

            {provided.placeholder}
        </div>
    )}

第二：当你在onDragEnd()中实现删除功能时，我们可以改变那个元素的标志。

【讨论】：