javascript - 使用 react-beautiful-dnd 更改拖放区中的元素大小

Question

我想将一个项目从容器 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,
       }}
    />
)

Answer 1

您可以为每个容器中的项目提供单独的样式。你必须有这样的东西:

<Dropabble className="containerA">
    <Draggable className="dragabbleItem">
    <Draggable>
</Dropabble>

<Dropabble className="containerB">
    <Draggable className="dragabbleItem">
    <Draggable>
</Dropabble>

你可以有这样的风格:

.containerA .dragabbleItem {
   width: 100px
}

.containerB .dragabbleItem {
   width: 20px
}