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

Question

我想将一个项目从一个容器拖到一个A容器中B。在我的上下文中，同一个项目在 container 中时具有不同的大小和样式，B而不是在 container 中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

You can provide individual styling to the items in each container. You must have something like this:

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

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

You can have style like:

.containerA .dragabbleItem {
   width: 100px
}

.containerB .dragabbleItem {
   width: 20px
}