javascript - 带有区域限制的 Angular 8 拖放

Question

我正在寻求一些帮助来解决我几天来一直困惑的问题。

问题

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

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

我遇到的困难是拖放允许多个项目进入列表/区域，而我只想一次只允许一个区域中的一个项目。想象一下一个拖放测验，您可以将答案拖到图表上的一个位置，一旦您有了一个答案，您唯一能做的就是通过删除另一个项目来替换它，或者不允许删除其他任何内容直到你清理出空间。

要求

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

• N 个可能的拖动选项
• 10 个转换区
• 最多只能容纳 1 件元素

代码示例

我将粘贴一个 Stackblitz，展示我想要的内容，并且我还将链接 Ngx-smooth-dnd 库 github 来获取文档:

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

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

奖金

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

Answer 1

我使用了 Angular Material :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，请告诉我!