ng2-dragula one-way drag & limit number of elements in a bag

Question

i'm having an issue on a project.

I'm currently working on a mobile app with ionic. In this app, you select a list of widgets you want to display on your home page.

Once you selected the widgets you want to use, you can change the layout they're organized in. This is the part i'm currently working on.

I used ng2-dragula to use a drag-n-drop feature.

The screen is divided in 4 rows of 3 columns. There is a hidden div that shows up when you press the + button which contains the widgets' preview (<img src="...">)

Currently, all of this works well, but i want to limit the way users can interact with it.

This is the code of the menu that pops up when the user presses the + button :

<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>

And this is the grid in which the user should drop the widgets (modules) he wants to display :

<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>

How can I limit the number of items in a bag ? and how can i get a bag's id ?

I was thinking about customizing my accepts function, but i still don't understand how to access the bag's id For example, if i have my HTML like this :

<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>

How can i tell dragula to only allow dropping the element from firstBag to 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)]