Skip to content

Drag and drop drag animation bugs #12694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
BirdInTheCity opened this issue Aug 16, 2018 · 1 comment · Fixed by #12837
Closed

Drag and drop drag animation bugs #12694

BirdInTheCity opened this issue Aug 16, 2018 · 1 comment · Fixed by #12837
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@BirdInTheCity
Copy link

Bug, feature request, or proposal:

Bug

What is the current behavior?

ezgif-1-8b28b53c34

Two visible issues in the clip above:

  1. Two cdkDrag elements overlap (Theatre and Transport) during drag. The larger Transport element offsets itself by its own height rather than the drag element height.
  2. Drag element "jitters" during rollover of the larger Transport element.

What are the steps to reproduce?

Pick up the right element and rollover the elements in the left panel.

Attempted to provide the sample cards on Stackblitz.

The drag-and-drop is responding oddly though. I'm unsure why that is.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest release (6.4.5)

@crisbeto crisbeto self-assigned this Aug 16, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Aug 26, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 26, 2018
…position swap

Currently we check whether the user's pointer overlaps an item for each pixel that they've moved. This works fine when the items have a similar height, however it breaks down if there's a position swap between a very tall item and a smaller one. These changes rework the logic to take into account the direction that the user is moving in, before doing a position swap.

Fixes angular#12694.
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 26, 2018
…position swap

Currently we check whether the user's pointer overlaps an item for each pixel that they've moved. This works fine when the items have a similar height, however it breaks down if there's a position swap between a very tall item and a smaller one. These changes rework the logic to take into account the direction that the user is moving in, before doing a position swap.

Fixes angular#12694.
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 27, 2018
…position swap

Currently we check whether the user's pointer overlaps an item for each pixel that they've moved. This works fine when the items have a similar height, however it breaks down if there's a position swap between a very tall item and a smaller one. These changes rework the logic to take into account the direction that the user is moving in, before doing a position swap.

Fixes angular#12694.
jelbourn pushed a commit that referenced this issue Aug 27, 2018
…position swap (#12837)

Currently we check whether the user's pointer overlaps an item for each pixel that they've moved. This works fine when the items have a similar height, however it breaks down if there's a position swap between a very tall item and a smaller one. These changes rework the logic to take into account the direction that the user is moving in, before doing a position swap.

Fixes #12694.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
2 participants