实施 ng2-dnd 放置区限制问题答案

【问题标题】：Implement ng2-dnd drop zone restriction issues实施 ng2-dnd 放置区限制问题
【发布时间】：2017-08-07 00:09:42
【问题描述】：

我使用 ng2-dnd 为我的 Angular 4 应用程序实现了拖放功能。我有可以分类的容器和每个容器中的物品也可以分类。

我想限制每个容器中的项目被重新分配给另一个容器。

有一个容器 1 和容器 2。容器 1 有 Item1、Item2，容器 2 有 Item3、Item4。我想限制 Item1 被放入容器 2。

我尝试使用[allowDrop]="allowDropFunction()"，但没有成功。我可以使用什么功能来限制drop？

【问题讨论】：

标签： javascript angular drag-and-drop drag

【解决方案1】：

您可以使用 dropzone 将元素拖放到目标容器中。例如在要拖动的元素上：

<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">
  <div class="panel-body">
    <div>Drag Me</div>
    <div>Zone 1 & 2</div>
  </div>
</div>

然后在目标容器上：

<div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">
    <div class="panel-heading">Zone 1</div>
    <div class="panel-body">
        <div *ngIf="restrictedDrop1">Item was dropped here</div>
    </div>
</div>

<div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">
    <div class="panel-heading">Zone 2</div>
    <div class="panel-body">
        <div *ngIf="restrictedDrop2">Item was dropped here</div>
    </div>
</div>

只要您要拖动的元素在其 dropZones 属性中具有匹配的 dropzone（可以是字符串或数组），就可以将该元素拖放到目标容器中。

如果想要更改放置区，您可以使用属性绑定动态地进行。

【讨论】：