change element size in drop-zone with react-beautiful-dnd

user_926459 0
Viewed 1982

I want to drag an item from a container A to a container B. In my context the same item has a different size and style when it's in container B as opposed to container A.

enter image description here

I found an approach to do this but the issue is that the transforms on the items in container B to make room for the item while dragging are calculated based on the initial size in container B. Is there any way to achieve what I am trying to do?

...
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,
       }}
    />
)
react-beautiful-dnd reactjs drag-and-drop javascript
1 Answers

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
}
user_36967100
Related