bug(drag-drop): Item swapping behaviour not optimal for all scenarios

[preda7or]

Reproduction

No special setup is needed, the "bug" can be reproduced even on the https://material.angular.io/cdk/drag-drop/overview site.

Expected Behavior

I expect an item to be swapped downwards if I drag another item towards its top (and the same for all directions).

(When using nested drop lists, I would even expect an item not to move till I get to the bottom of its nested drop list.)

Actual Behavior

Item's are swapped unrelated WHERE the cursor is over them,
and taking the mouse movement direction change into account in a way that is not always correct.

Environment

• Angular: 9+
• CDK/Material: 9.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

Suggestion

1. Providing a sorting callback property for drop lists, so developers can handle custom sorting scenarios.
2. Or making the built in sorting function more universal (even working with nested drop lists, without moving the parent item prematurely, etc.)

[jelbourn]

@crisbeto I think there's actually a bug here. To see it:

1. Grab an item from the middle of the list
2. Pull it to the side of the list and then bring it up from the bottom
3. Slowly move it upwards
4. Notice that the last item doesn't move when the cursor reaches the top of it. It's not until you get to the second-to-last item that the list moves to make room for the dragged item.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}