我想将一个项目从容器 A
拖到容器 B
。在我的上下文中,同一项目在容器 B
中与容器 A
中时具有不同的大小和样式。
我找到了一种方法来做到这一点,但问题是容器 B
中的项目的转换是根据容器 中的初始大小计算的,以便在拖动时为项目腾出空间B
。有什么方法可以实现我想要做的事情吗?
...
const isDraggingOverContainerB = snapshots.draggingOver === 'containerB';
const size = isDraggingOverContainerB ? 20 : 100;
return (
<DraggableItem
{ ...provided.draggableProps }
{ ...provided.dragHandleProps }
ref={ provided.innerRef }
className={ 'drag-box' }
style={{
...provided.draggableProps.style,
width: size,
height: size,
}}
/>
)
最佳答案
您可以为每个容器中的项目提供单独的样式。你必须有这样的东西:
<Dropabble className="containerA">
<Draggable className="dragabbleItem">
<Draggable>
</Dropabble>
<Dropabble className="containerB">
<Draggable className="dragabbleItem">
<Draggable>
</Dropabble>
你可以有这样的风格:
.containerA .dragabbleItem {
width: 100px
}
.containerB .dragabbleItem {
width: 20px
}
关于javascript - 使用 react-beautiful-dnd 更改拖放区中的元素大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63001279/