Question

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

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

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

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

Answer 1

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

<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，就可以将该元素放入目标容器中。

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

实施ng2-dnd丢弃区域限制问题

1 个答案: