Перетащите с помощью ng2-dragula между двумя угловыми компонентами

У меня есть два угловых компонента: один называется поддоном, содержащим отдельные элементы поддона, а другой называется хостом, который изначально пуст. Я объявил директивы ndragula для каждого из этих компонентов («сумка для поддонов» и «сумка для хоста» соответственно). Я могу без проблем переупорядочивать элементы поддона в своем компоненте поддона, но когда я пытаюсь перетащить элементы поддона на свой хост-компонент, он не принимает действие перетаскивания. Есть ли что-то конкретное, что мне нужно настроить, чтобы мой хост принимал предметы с поддона?

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>

javascript drag-and-drop ng2-dragula
person auburg    schedule 29.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы разрешить перетаскивание между двумя вашими сумками, они должны иметь одинаковое имя (например: «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>
person Sa Hagin    schedule 02.06.2017