问题描述
在单个 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 的项目留下的空白点。有没有办法阻止这种情况?理想情况下,我希望空白位置保持空白,而不是让其他进行中的图标向上移动并填满。
先谢谢你!
解决方法
我没有直接的解决方案,但我有一个想法可以解决这个问题。
当您使用 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()
中实现删除功能时,我们可以更改该元素的标志。