Angular 8 Drag and Drop с пределами зоны - PullRequest
0 голосов
/ 08 ноября 2019

Я прошу помощи, чтобы решить проблему, над которой я почесал голову уже несколько дней.

Проблема

Я сейчас пытаюсь решитьфункция перетаскивания, которая требует, чтобы вы могли перетаскивать до 10 элементов, чтобы заполнить назначенные места (места могут содержать только 1 элемент), и после того, как 10 заполнены, параметры не будут позволять больше перетаскивать, покаместо очищено.

В настоящее время я использую библиотеку Ngx-Smooth-DND для своего перетаскивания, но я не ограничен этим и могу открыть другую библиотеку, если она может соответствоватьтребования (включая Kendo Sortable, на который у меня есть лицензия).

В чем я борюсь заключается в том, что перетаскивание позволяет нескольким элементам войти в список / зону, тогда какЯ хочу разрешить только один элемент в зоне одновременно. Представьте себе викторину с перетаскиванием, в которой вы можете перетащить ответ только в одно место на диаграмме, и, получив его, единственное, что вы можете сделать, это либо заменить его, бросив другой элемент, либо не допустить, чтобы что-либо еще было отброшенопока вы не очистите пространство.

Требования

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

  • N количество возможных вариантов перетаскивания
  • 10 перетаскиваемых зон
  • Может содержать только 1 элемент MAX

Пример кода

Я вставляю Stackblitz, показывающий, что я собираюсь, и я также собираюсь связать библиотеку GitHub-NDX-smooth-dnd для документации:

https://stackblitz.com/edit/angular-ro3pyw

https://github.com/kutlugsahin/ngx-smooth-dnd

Бонус

Если есть лучший подход или лучшая библиотека перетаскивания, которая может сделать это намногочище и проще, я на 100% открыт для опций.

...