使用ng2-dragula在兩個角度組件之間拖放

Question

我有兩個角度組件，一個稱爲托盤，其中包含各個托盤項目，另一個稱爲主機，最初爲空。我已經爲這些組件中的每一個聲明瞭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>