Move items between overlapping lists

[mheavenor]

Bug

Expected behavior

I am able to move items with keyboard control between adjacent lists that overlap each other in their cross axis.

Actual behavior

Because the two droppables overlap eachother, I cannot move items between these lists with the keyboard.

This issue is cause by the following code in get-best-cross-axis-droppable.js:

if (isMovingForward) {
    // is the droppable in front of the source on the cross axis?
    return sourceClipped[axis.crossAxisEnd] <= targetClipped[axis.crossAxisStart];
}
// is the droppable behind the source on the cross axis?
return targetClipped[axis.crossAxisEnd] <= sourceClipped[axis.crossAxisStart];

Example:

If moving left, it checks if the right edge of the target droppable is further to the left than the left edge of the source droppable. If these droppables overlap in their cross axis, this is not the case and this returns false.

Proposed fix:

A proposed change would compare the source's axis.crossAxisEnd with the target's axis.crossAxisEnd. I have made this change locally and is currently working.

Steps to reproduce

Create two lists that overlap eachother in their cross axis. As you will have DOM elements overlapping eachother, you may need to apply some CSS transform or position attributes.

Browser version

Google Chrome: 63.0.3239.132 (Official Build) (64-bit) (cohort: Stable)

Demo

Two lists that overlap eachother by 10px (showing actual behavior, not expected behavior):
https://codesandbox.io/s/8prx5q7xj

[alexreardon]

As you said, overlapping lists is currently not supported. For now we'll keep it as is, but it could be worth looking into this check.

[mheavenor]

Thanks @alexreardon for replying. For now the change seems to be working locally so I will continue to use my modified source. Hopefully this becomes supported in the future.

[alexreardon]

Perhaps we could change this check so it simply compares the center positions. That would allow for some level of overlap.

Thoughts?

[mheavenor]

Just thinking through it...

Using centers will effectively be the same as checking crossAxisEnd as long as the widths of the two droppables are the same. If the widths are different, then as long as the two droppables share either the same crossAxisStart or crossAxisEnd then using centers still works.

This solution works for me :)

[mheavenor]

@alexreardon , do you know if your recommended change to simply compare the center positions will be changed soon?

[alexreardon]

This has been fixed in #493 and will ship in the next version

[mheavenor]

Thanks @alexreardon !