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

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

Демонстрация проблемы с перетаскиванием

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

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

stackblitz


javascript angular angular-material angular-cdk
person tabinda    schedule 06.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Мы можем использовать событие cdkDragDropped CdkDrag. 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 }

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

person shhdharmen    schedule 06.02.2019
comment
isPointerOverContainer помог в моем запросе, но все же заполнитель присутствует даже после того, как я выхожу из контейнера для перетаскивания. - person tabinda; 06.02.2019
comment
Да, заполнитель и анимация не обрабатываются должным образом. Вам нужно будет проверить события cdkDropList, они могут помочь. - person shhdharmen; 06.02.2019
comment
fyi, это не будет работать с базовым элементом cdkDrag (без контейнера, также известного как cdkDropList), но будут работать cdkDragReleased и cdkDragEnded. <div cdkDrag cdkDragBoundary=".container-like-elem" (cdkDragStarted)="dragStarted($event)" (cdkDragReleased)="dragReleased($event)" (cdkDragEnded)="dragEnded($event)">, затем dragReleased(event: CdkDragDrop<string[]>) { console.log('cdkDragReleased', event); } - person n0mad; 04.04.2019