Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug:(@angular/cdk/drag-drop): inconsistent transfer between cdk-drop #12944

Closed
AhsanAyaz opened this issue Sep 1, 2018 · 4 comments · Fixed by #12948
Closed

bug:(@angular/cdk/drag-drop): inconsistent transfer between cdk-drop #12944

AhsanAyaz opened this issue Sep 1, 2018 · 4 comments · Fixed by #12948
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@AhsanAyaz
Copy link

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The dragged item should be transferrable between connected drop-zones (cdk-drop) but they have some inconsitent behavior. I've shared a stackblitz link below. When you open it:

  • Notice that Drag Me 1 div can be transferred to Zone2 but then cannot be transferred back to Zone1.
  • Notice that Drag Me 2 can be dragged to Zone1 and a preview is shown, but cannot be dropped actually.

What is the current behavior?

The item is transferred from zone1 to zone2 but I can not transfer it back to zone1 although they are connected zones. Please correct me if this isn't an appropriate use case :)

What are the steps to reproduce?

StackBlitz: https://stackblitz.com/edit/cdk-drag-drop-issue

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

@angular/[email protected]

Image

large gif 566x666
@junraemon
Copy link

Check Netanel Basal's article, there is an example on how to connect 2 drop zones.
https://netbasal.com/getting-to-know-the-angular-cdk-drag-and-drop-feature-d79ba462ce31

@crisbeto crisbeto self-assigned this Sep 2, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 2, 2018
@crisbeto
fix(drag-drop): DOM element not being returned to initial container o…
c23923c 
…n drop

Currently when an item is dropped, we return it to its initial position in the DOM so Angular can take over and re-render it if necessary, however this breaks down if the item is the only child of the drop container and we weren't able to grab a reference element that we can use to restore its position. These changes address the issue by using the initial drop container as a reference.

Fixes angular#12944.
@crisbeto crisbeto mentioned this issue Sep 2, 2018
Merged
@crisbeto
Copy link
Member

crisbeto commented Sep 2, 2018

@AhsanAyaz a note on your example: the CDK won't move the item from one container to another for you, that's up to you to do in the dropped event. That being said, your example highlights an issue where the item doesn't get reverted to its initial DOM position, under certain conditions. I've submitted #12948 that will properly revert the item.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Sep 2, 2018
@AhsanAyaz
Copy link
Author

Thanks @crisbeto for the fix and PR. 👍
I was writing my own article on the CDK when I felt the need to use two drop-zones. Thanks for sharing the above article though!

jelbourn pushed a commit that referenced this issue Sep 6, 2018
@crisbeto @jelbourn
fix(drag-drop): DOM element not being returned to initial container o…
4dfd9d9 
…n drop

Currently when an item is dropped, we return it to its initial position in the DOM so Angular can take over and re-render it if necessary, however this breaks down if the item is the only child of the drop container and we weren't able to grab a reference element that we can use to restore its position. These changes address the issue by using the initial drop container as a reference.

Fixes #12944.
jelbourn pushed a commit that referenced this issue Sep 11, 2018
@crisbeto @jelbourn
fix(drag-drop): DOM element not being returned to initial container o…
fb7bf90 
…n drop (#12948)

Currently when an item is dropped, we return it to its initial position in the DOM so Angular can take over and re-render it if necessary, however this breaks down if the item is the only child of the drop container and we weren't able to grab a reference element that we can use to restore its position. These changes address the issue by using the initial drop container as a reference.

Fixes #12944.
@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.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(drag-drop): DOM element not being returned to initial container on drop crisbeto/material2
3 participants
@crisbeto @AhsanAyaz @junraemon