Как использовать cdkDropListEnterPredicate для проверки нескольких условий? - PullRequest
1 голос
/ 11 января 2020

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

this.maxVirtuePts = 10;
this.reqSocialStatus = false;
this.allowedTheGift = true;
this.maxHermeticMajorVirtue = 1;

Для maxVirtuePts, как мне ограничить количество элементов в зоне перетаскивания до 10? Для reqSocialStatus, как мне проверить, что хотя бы один элемент существует в удаленной зоне? Как с помощью allowTheGift проверить, содержит ли имя отброшенного элемента указанный c текст? Для maxHermeticMajorVirtue как проверить, существует ли уже удаленный элемент из указанного списка c, чтобы избежать добавления дополнительных элементов из того же списка происхождения?

Если кто-то может предложить или предоставить примеры того, как эффективно использовать cdkDropListEnterPredicate , это будет высоко ценится.

Добавлен StackBlitz: https://stackblitz.com/edit/angular-flpx5t

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Я закончил тем, что использовал cdkDropListEnterPredicate, но только последнюю проверку, которая заблокировала бы дальнейшую передачу элементов. Чтобы добраться до окончательной проверки, я вычислил другие условия как переменные.

0 голосов
/ 11 января 2020

В вашей функции отбрасывания вы можете проверить любое условие, которое вы хотите, если условие не выполнено, просто вызовите функцию возврата, это остановит сброс элемента в зону

, например

drop(event: CdkDragDrop<string[]>) {
    if(event.container.data.length>9){
     return // this will stop item from drop
    }
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
...