带有区域限制的Angular 8拖放答案

【问题标题】：Angular 8 Drag and Drop With Zone Limits带有区域限制的Angular 8拖放
【发布时间】：2020-03-04 12:39:22
【问题描述】：

我正在寻求一些帮助，以解决我这几天一直在摸索的问题。

问题

我目前正在尝试实现一个拖放功能，该功能要求您最多可以拖动 10 个项目来填充指定位置（位置只能容纳 1 个项目），并且在填充了 10 个后，在清除某个点之前，选项将不再允许拖动。

我目前正在使用 Ngx-Smooth-DND 库进行拖放，但我不限于此，如果它能够满足要求，可以打开到不同的库（包括我有的 Kendo Sortable许可证）。

我苦苦挣扎的地方是拖放允许多个项目进入列表/区域，而我希望一次只允许一个项目进入区域.想象一下拖放式测验，您可以将答案拖到图表上的一个位置，一旦有了答案，您唯一能做的就是通过拖放另一个项目来替换它，或者不允许其他任何东西被拖放直到你清除空间。

要求

需要实现拖放要求，您可以将项目从选项列表中拖放到 10 个不同区域中的 1 个。

N 个可以拖动的选项
10 个拖放区
最多只能容纳 1 件物品

代码示例

我正在粘贴一个 Stackblitz，显示我的目标，我还将链接 Ngx-smooth-dnd 库 github 以获取文档：

https://stackblitz.com/edit/angular-ro3pyw

https://github.com/kutlugsahin/ngx-smooth-dnd

奖金

如果有更好的方法或更好的拖放库可以更清洁、更简单地完成此任务，我会 100% 接受选择。

【问题讨论】：

您正在努力实现哪些要求？
位置/替换。拖放的继承行为是您可以不断地添加到列表中。因此，如果您查看我发布的 Stackblitz，从技术上讲，您可以将它们全部拖入第一个区域而不是单个区域，这不利于防止超过 1 个。
我在 Ngx-Smooth-DnD 文档中看不到任何明显的东西可以帮助你做你想要的，尽管我不熟悉那个库。我已经用 Angular CDK 实现了类似的行为。此链接提供了一个示例：material.angular.io/cdk/drag-drop/…
我考虑了材质库的拖放。您是否有一个示例，其中您有 10 个放置区，只能在其中放置一件物品？

标签： javascript angular typescript drag-and-drop kendo-ui-angular2

【解决方案1】：

我使用了棱角材料：https://material.angular.io/cdk/drag-drop/overview 创造类似的东西。

我用了这个例子：https://material.angular.io/cdk/drag-drop/overview#controlling-which-items-can-be-moved-into-a-container 弄清楚如何限制容器中可能存在的项目数量：

// drop-example.component.html
<div class="drop-area" cdkDropList
  #dropArea="cdkDropList"
  [cdkDropListData]="myEmptyArrayVariable"
  [cdkDropListConnectedTo]="[optionsList]"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="limiterPredicate">

// drop-example.component.ts
import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

...
// see section in the drag-drop docs for example drop($event) {} function
...

limiterPredicate(item: CdkDrag, container: CdkDropList) {
  if (container.data.length === 0) {
    return true;
  } else {
    return false;
  }
}

如果您无法解决剩下的问题，那么我可以尝试为您创建一个 stackblitz，请告诉我！

【讨论】：