Angular перетаскивание: как предотвратить попадание элемента в нежелательный список

Question

Я пытаюсь использовать функцию перетаскивания, предоставляемую angular материалом , чтобы иметь возможность перемещать элементы из списка Параметры в Incude или Исключить список (все, что включено, зависит от выбранного переключателя в группе Куда переместить )

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.

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.

Вот демонстрация в stackblitz

Answer 1

Библиотека перетаскивания сохраняет последний активный контейнер и добавляет в него перетаскиваемый элемент, когда он отбрасывается. Это означает, что если вы перетащите элемент в список Включить до того, как перетащите его в недопустимый список Исключить , последним активным контейнером все равно будет список Включить .

Можно использовать event.isPointerOverContainer в методе drop, чтобы проверить, не сброшен ли он за пределами контейнера drop. Недостатком этого является то, что анимация по-прежнему возвращает элемент обратно в список Сначала включить ..