Question

我在项目上遇到了问题。

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

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

我使用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>

如何限制行李中的物品数量？我怎么能得到一个包＃{1}}？

我在考虑自定义id功能，但我仍然不了解如何访问包accepts 例如，如果我有这样的HTML：

id

我如何告诉dragula只允许将元素从firstBag删除到secondBag？

Answer 1

每个dragula文档：

<?php

$statement = $pdo2->prepare("SELECT * FROM fragen WHERE fragen_id = :id");
// here we put a value into the parameter
$result = $statement->execute([':id' => (int)$_GET['id']]);

while($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        echo '<div class="forum"><div class="forum_Titel">' ,"Titel:  ".$row['fragen_title'].'</div>',
        "<br><br>",'<div class="forum_Subitel">', "Subtitel:  " .$row['fragen_subtitle'].'</div>',
        "<br><br>",'<div class="forum_Content">',"Text:  ".$row['fragen_content'].'</div>',
        "<br><br>",'<div class="forum_Bild"><img class="pic" alt="Ein Bild" title="Eine Pflanzen" src="'.$row['fragen_picture'].'">',
        "<br><br>","Bildlink:  ".$row['fragen_picture'].'</div>',
        "<br><br>",'<div class="forum_Upload-date">',"Upload-Datum:  ".$row['fragen_date'].'</div>',
        '</div>';

}
?>

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

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

要限制行李中的物品数量，您可以检查在accepts: function (el, target, source, sibling) { return source.id === 'firstBag && target.id === 'secondBag'; }中传递的数组的长度

ng2-dragula单向拖曳＆amp;限制包中的元素数量

1 个答案: