2

我在一个项目上遇到问题。

我目前正在使用 ionic 开发移动应用程序。在此应用程序中，您可以选择要在主页上显示的小部件列表。

选择要使用的小部件后，您可以更改它们的组织布局。这是我目前正在处理的部分。

我使用 ng2-dragula 来使用拖放功能。

屏幕分为 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 ？

4

1 回答 1

0

根据 Dragula 文档：

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

于 2019-03-13T18:00:42.370 回答