使用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
}