Dragged item "jumping" when dragging an item from nested group to root group

[ivan-banha]

Hi.

I'm developing a list of items which can has nested list. I need a possibility to rearrange items in the root list and nested lists. Also, where should be the possibility to drag items between the root list and nested lists.

When I'm dragging an item from root list to a nested list, everything works fine. But when I'm dragging an item from nested list to root list my fallback item is jumping over the page. It seems like it happened when the item is moved out of the nested sortable area.

Here is the video.

This is my config. It's the same for the root group and nested groups

animation={210}
delay={100}
delayOnTouchOnly={true}
ghostClass={classes.ghostCard}
group="shared"
handle=".boardItemDragTrigger"
forceFallback={true}
fallbackClass={classes.draggedCard}
className={classes.sortableList}
id={parentSection.id}

If I set forceFallback: false it starts work fine but my styles from fallbackClass are not applied. react-sortablejs: 2.0.11

What can cause this kind of problem?

[kosenkobogdan]

I believe the reason for jumping can be other styles applied somewhere in the component tree. You can try fallbackOnBody, it might help.