Add placeholder affordance to Droppable subjects within a scroll container

[humphreybc]

Bug or feature request?

Not sure. I'd call it a usability bug, but I guess it could also be a feature request.

Expected behavior

When dragging an item from one droppable to the next, the bottom ‘drop area’ affordance should grow to a large enough target area to drop comfortably. It should also become ‘available’ when dragging near the bottom of a list, even if it's outside the list, like Trello. This provides a much larger drop affordance for getting items into the bottom of a list.

Actual behavior

Dragging an item into the bottom of a droppable list is difficult because the drop area does not reliably expand like it does when dragging an item in-between other items in the droppable when coming from the bottom of the list. The drop area also does not become available when dragging ‘near’ the bottom of the list, even if you're outside the list.

Steps to reproduce

1. Use a ‘board’ type layout.
2. Pick up an item in the first list.
3. Drag it directly underneath the next list. The next list’s drop area will not trigger.
4. Now drag the item up onto the bottom of the list. The list’s drop area will trigger.
5. Overshoot the small gap slightly and let go. Your item will be in the second-to-last position.

Browser version

Chrome 64.0.3282.140 on Mac OS X High Sierra.

Dovetail demo

The drop area created at the bottom of a list is very small and easy to overshoot. You either end up with the item in second-to-last position, or it doesn't move at all.

Storybook demo

The storybook is slightly better (possibly some extra padding applied somewhere?) but you can see the drop area at the bottom of the list is still hard to get to.

Trello demo

This is the ideal behaviour because it creates a much larger affordance for dropping an item. The drop area is immediately available when moving horizontally across to the next list, even if the item is below the list. You can let go at any time, and the item will be added to the bottom position of the next list.

[alexreardon]

Nice pick up.

We actually extend the droppable area of a Droppable when it is not within a scroll container which is why it works correctly in a board examples that only use the window as the scroll container. When a Droppable is within a scroll container we do not extend the subject (to keep things simple). However, I think it is worth revisiting this to make a better experience!

[alexreardon]

#131