ng2-dragula одностороннее перетаскивание и ограничение количества элементов в сумке

Question

У меня проблема с проектом.

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

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

Я использовал ng2-dragula, чтобы использовать функцию drag-n-drop.

Экран разделен на 4 ряда по 3 колонки. Есть скрытый div который появляется, когда вы нажимаете + кнопка, которая содержит предварительный просмотр виджетов (<img src="...">)

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

Это код меню, которое появляется, когда пользователь нажимает + кнопка:

<ion-grid id="modules-list">
    <ion-row>
      <ion-col [dragula]='"module-layout"' *ngIf="userSettings.dateTimeWeather" class="moduleListItem">
        <img src="...">
      </ion-col>
  <ion-col [dragula]='"module-layout"' *ngIf="userSettings.rssFeed" class="moduleListItem">
    <img src="...">
  </ion-col>
  <ion-col [dragula]='"module-layout"' *ngIf="userSettings.timeToHome" class="moduleListItem">
    <img src="...">
  </ion-col>
  <ion-col [dragula]='"module-layout"' *ngIf="userSettings.personalMessage" class="moduleListItem">
    <img src="...">
  </ion-col>
</ion-row>

И это сетка, в которой пользователь должен отбросить виджеты (модули), которые он хочет отобразить:

<ion-grid>
<ion-row col-12>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container"></ion-col>
</ion-row>

Как я могу ограничить количество вещей в сумке? и как я могу получить сумку id?

Я думал о настройке моего accepts функция, но я до сих пор не понимаю, как получить доступ к сумке idНапример, если у меня есть мой HTML, как это:

<ion-row col-12>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container" id ="firstBag"></ion-col>
  <ion-col col-4 [dragula]='"module-layout"' class="module-container" id ="secondBag"></ion-col>
</ion-row>

Как я могу сказать dragula, чтобы разрешить только сброс элемента из firstBag во secondBag?

Answer 1

Per dragula docs:

accepts: function (el, target, source, sibling) {
  return true; // elements can be dropped in any of the `containers` by default
},

So all arguments are HTML elements. You could do simple check like:

accepts: function (el, target, source, sibling) {
  return source.id === 'firstBag && target.id === 'secondBag';
}

For limiting the number of items in the bag you can check length of array you pass in [(dragulaModel)]