使用 ng2-dragula 在两个 angular 组件之间拖放

Question

我有两个 angular 组件，一个称为 pallet，包含单独的 pallet 项目，另一个称为 host，它最初是空的。我已经为每个组件声明了 ndragula 指令（分别为 'pallet-bag' 和 'host-bag'）。我能够在我的托盘组件中重新排序托盘项目而没有任何问题，但是当我尝试将托盘项目拖到我的主机组件时，它不接受放置操作。有什么我必须配置才能让我的主人接受货盘上的物品吗？

HTML 调色板是：

<ul class="palette">
 <app-palette-item [dragula]='"palette-bag"' id="palette" *ngFor="let item of Items" [Name]="item.Name" [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
 </ul>

主持人：

<div class="host" id="host" [dragula]='"host-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>

我的顶级应用组件是这样的：

<div>
  <app-palette id="palette"></app-palette>
  <app-host id="host"></app-host>
</div>

Answer 1

为了允许在您的两个包之间拖放，它们必须具有相同的名称（例如："fisrt-bag"）：

对于调色板：

<ul class="palette">
 <app-palette-item [dragula]='"first-bag"' id="palette" 
 *ngFor="let item of Items" [Name]="item.Name" 
 [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
</ul>

主持人：

<div class="host" id="host" [dragula]='"first-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>

使用 ng2-dragula 在两个 angular 组件之间拖放

Drag and drop using ng2-dragula between two angular components

javascript

drag-and-drop

ng2-dragula