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
[dragDrop] On strict movement when dropping outside cdkDropList #17351
Comments
@doyeonOh how did you solve the issue? did you use different elements than cdk or was it possible to return the element to it's origin list? |
I got a solution: You can use the attribute |
@muellerdberlin However, since typescript does not allow private access, it is solved through @ ts-ignore, which ignores type checking. I wrote the code by referring to the Here is the code that worked.
|
Thank you! move(event: CdkDragDrop<Element>, listToMoveIn) {
// check if pointer was over another list, otherwise cancel
if (event.isPointerOverContainer) {
// move the element to another list
}
} |
The attribute A possible solution could be an event that triggers on exiting an droplist while not entering another... |
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends. Find more details about Angular's feature request process in our documentation. |
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage. We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package. You can find more details about the feature request process in our documentation. |
So here is my super hacky workaround. I didn't test it too much as this is temp solution. I'm using @angular/cdk 9 in this project so be warned: private lastEntered: CdkDropList
itemEntered($event: CdkDragEnter){
this.lastEntered = $event.container
}
itemMoved(event: CdkDragMove<Item>): void {
if(this.lastEntered !== event.source.dropContainer && !document.elementsFromPoint(event.pointerPosition.x, event.pointerPosition.y).some(el => el.classList.contains('cdk-drop-list'))){
this.lastEntered.exit(event.source)
event.source.dropContainer.enter(event.source, event.pointerPosition.x, event.pointerPosition.y)
this.lastEntered = event.source.dropContainer
}
}
itemDropped(event: CdkDragDrop<Item>, newStatus): void {
this.lastEntered = null
if(!event.isPointerOverContainer || event.container === event.previousContainer) {
event.item.reset()
return
}
} <div
class="sortable-list"
cdkDropList
(cdkDropListDropped)="itemDropped($event, 'pending')"
[cdkDropListEnterPredicate]="itemStatusNot('pending')"
>
<div
*ngFor="let item of pendingItems"
class="sortable-box"
cdkDrag
(cdkDragMoved)="itemMoved($event)"
(cdkDragEntered)="itemEntered($event)"
[cdkDragData]="item"
>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div> |
Feature Description
There is one problem with this, because of some action after dragging on cdkDragDrop.
In the case of dragDrop in angular / cdk, when dropping outside the drop zone, the item moves to the last drop zone where the item was entered.
In the dragula, apart from entering the drop zone, it returns to its original state when dropped outside the drop zone.
Therefore, it would be nice to provide an strict method of returning to angular / cdk dragdrop as an option.
Please let me know if there is a way around this.
thank you
The text was updated successfully, but these errors were encountered: