使用 react-beautiful-dnd 更改放置区中的元素大小答案

【问题标题】：change element size in drop-zone with react-beautiful-dnd使用 react-beautiful-dnd 更改放置区中的元素大小
【发布时间】：2020-07-20 17:58:20
【问题描述】：

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

【问题讨论】：

您好，您解决了吗？我也在寻找解决方案。

标签： javascript reactjs drag-and-drop react-beautiful-dnd

【解决方案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
}

【讨论】：