Angular drag & drop: How to prevent an item from being dropped in an unwanted list

user_530911 0
Viewed 988

I'm trying to use the drag and drop feature provided by angular material to be able to move items from the Options list to either the Incude or Exclude list(whatever is enabled depending on the selected radio button in the Where to move group)

enter image description here

So far it works, but there's something weird when only the Include list is enabled.

If I try to move an item to the Exclude list, instead of item the being returned to the Options list, it is added to the Include list. It only works as expected if I drag the item without hovering over the Include list.

enter image description here

Is there any way to prevent the item from being dropped inside the Include list when what I wanted to do was to drop it inside another list?

BTW, this has nothing to do with the Exclude list being disabled. I already tested this having both lists enabled and always wins the first list I passed on my way to dropping the item in the desired list.

Here's a demo in stackblitz

angular-cdk-drag-drop angular-material angular
1 Answers

The drag and drop library saves the last active container and adds the draggable item to it when it's dropped. Which means if you drag an item over the Include list before you drop it on the invalid Exclude list, the last active container is still the Include list.

It's possible to use event.isPointerOverContainer in your drop method to check if it's dropped outside a dropcontainer. The disadvantage of this is the animation still returns the item back to the Include list first..

user_52439830
Related