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
.
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,
}}
/>
)
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.