[英]Drag and drop using ng2-dragula between two angular components
I have two angular components, one called pallet containing individual pallet items and another called host which is initially empty. 我有两个角度组件,一个称为托盘,其中包含各个托盘项目,另一个称为主机,最初是空的。 I've declared ndragula directives for each of these components ('pallet-bag' and 'host-bag' respectively).
我已经为每个组件声明了ndragula指令(分别是“ pallet-bag”和“ host-bag”)。 I'm able to reorder pallet items within my pallet component without any problems but when i attempt to drag pallet items across to my host component, it doesn't accept the drop action.
我可以在托盘组件内重新排序托盘项目,而没有任何问题,但是当我尝试将托盘项目拖到我的主机组件上时,它不接受放置动作。 Is there anything specific i have to configure to get my host to accept items from the pallet ?
我必须配置一些特定的东西才能让我的主机接受托盘中的物品吗?
HTML for the palette is : 调色板的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>
And for the host : 对于主持人:
<div class="host" id="host" [dragula]='"host-bag"' [dragulaModel]='Items'>
<div *ngFor='let text of Items' [innerHtml]='text'></div>
</div>
My top level app component is like this: 我的顶级应用程序组件是这样的:
<div>
<app-palette id="palette"></app-palette>
<app-host id="host"></app-host>
</div>
In order to allow the drag and drop between your two bag, they must have the same name (for exemple: "fisrt-bag"): 为了允许两个包之间的拖放,它们必须具有相同的名称(例如:“ fisrt-bag”):
For the palette: 对于调色板:
<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>
For the host : 对于主持人:
<div class="host" id="host" [dragula]='"first-bag"' [dragulaModel]='Items'>
<div *ngFor='let text of Items' [innerHtml]='text'></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.