NG2-dragula 单向拖动和限制袋子中的元素数量

Question

我在项目上有问题。

我目前正在使用带有Ionic的移动应用程序。在此应用中，您选择要在主页上显示的小部件列表。

选择要使用的小部件后，您就可以更改其组织的布局。这是我当前正在工作的部分。

我使用ng2-dragula使用拖动-N-Drop功能。

将屏幕分为3列的4行。当您按+按钮时，有一个隐藏的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删除到第二袋？

Answer 1

per dragula docs：

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

因此，所有参数都是HTML元素。您可以进行简单的检查，例如：

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

对于限制袋子中的物品数量，您可以检查您在[(dragulaModel)]