reactjs React-美丽-dnd：防止其余可拖动项目重新排序/上移并替换正在拖动的项目

qhhrdooz 于 2023-03-17 发布在 React

关注(0)|答案(2)|浏览(218)

在一个单独的Dropable中，我Map了一个项目数组，每个项目都是自己的Dragable。我的代码工作正常，并且正在做它应该做的事情（也就是说，我可以单独移动每个Dragable）。我只是想知道是否有一种方法可以阻止我的其他Dragable“向上移动”或替换被拖动项目留下的空白位置。
下面是我的代码（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>

这里有一段视频记录了当时的情况：

正如你所看到的，下面剩下的图标会上移，并取代被拖出Dropable的项目留下的空位。有什么方法可以阻止这种情况吗？理想情况下，我希望空位保持为空，而不是让后面剩下的图标上移并填满。
先谢谢你！

reactjs

来源：https://stackoverflow.com/questions/65892450/react-beautiful-dnd-prevent-the-rest-of-draggable-items-from-reordering-movin

2条答案

按热度按时间

q3qa4bjr1#

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

first：假设我们添加一些额外的信息到对象中，以跟踪它是否被删除。添加一个条件，以便如果flag为true，则呈现元素。否则，将显示隐藏的元素。注意：我不确定，但我认为您可以使用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()中实现删除函数时，我们可以改变那个元素的标志。

赞(0）回复(0）举报 2023-03-17

rkkpypqq2#

这可能不是正确的解决方案，但不失为一种变通方法。

<Draggable
    key={item.id}
    draggableId={item.name}
    index={index}
    >
    {(provided, snapshot) => (
        <>
            <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
            >
                {item.icon}
            </div>
            {
                snapshot.isDragging && (
                <div style={{ width: '20px', height: '20px' }}
                )
            }
        </>
        )}
</Draggable>;

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs React-美丽-dnd：防止其余可拖动项目重新排序/上移并替换正在拖动的项目

2条答案

相关问题

热门标签

最新问答