Удаление заполнителя для области перетаскивания, когда курсор не находится в зоне перетаскивания в материале cdk drag & drop

Question

Когда элемент перетаскивания перемещается по области перетаскивания, область подсвечивается и создается ее заполнитель.Но если точка мыши отодвигается от области выпадения, отпустите предмет.Он по-прежнему падает в зону перетаскивания.

Демонстрация выпадающего перетаскивания

Ожидаемое поведение :

Как только указатель мышиотойдите от зоны падения, и пользователь отпустит мышь или отменит перетаскивание.Следует вернуться к списку начала перетаскивания.

stackblitz

Answer 1

Как правило, вы хотите проверить, когда предмет был уронен, разрешен ли ему контейнер или нет.

Мы можем использовать CdkDrag 'cdkDragDropped событие.cdkDragDropped испускает объект, который имеет тип интерфейса CdkDragDrop.CdkDragDrop имеет свойство с именем isPointerOverContainer: boolean, которое возвращает указатель на то, был ли указатель пользователя на контейнере при отбрасывании элемента.

Я создал пример кода для stackblitz .

По сути, я сделал следующее:

1. Прослушал cdkDragDropped событие cdkDrag элемента: <div class="example-box" *ngFor="let item of todo" cdkDrag (cdkDragDropped)="dragDropped($event)">{{item}}</div>
2. В функции dragDropped я сохранилфлаг: dragDropped(event: CdkDragDrop<string[]>) { this.isPointerOverContainer = event.isPointerOverContainer; }
3. В функции drop я проверил тот же флаг: if (this.isPointerOverContainer) {...} else { //dropped outside }

В настоящее время элемент вернется в исходное положение, если его выпустить наружу.Но анимация не обрабатывается, вы можете исследовать эту часть.