如何使用ng2-dragula拖放到多個Angular2組件

Question

我有一個Angular2組件，使用ng2-dragula進行拖放，如下所示：

@Component({
  selector: 'my-comp',
  directives: [
    Dragula
  ],
  viewProviders: [
    DragulaService
  ],
  template: `
    <div class="my-div">
      <div *ngFor="#item of items" [dragula]='"card-bag"' [dragulaModel]='items'>
      ...
      </div>
    </div>
  `
})

我的問題：如果我創建了多個“my-comp”組件，“card-bag”中的項目不能拖放這些組件，盡管它們具有相同的包名稱。 這些項目只能在其擁有的組件內拖放。

我們是否有任何跨組件拖放的配置，或者這是ng2-dragula限制？

謝謝。

Answer 1

如果你沒有使用[dragulaModel]那么只要在top / root組件中設置viewProviders: [ DragulaService ]一次，嵌套組件之間的拖放效果就會很好。

切記不要在其他組件中設置viewProviders: [ DragulaService ] ，因為它為每個組件創建新實例。

編輯：最近我使用ng2-dnd npm包實現了給定的場景。 它比ng2-dragula更好，並提供簡單的物體傳遞和其他東西。 它可能會解決您的問題。

Answer 2

我有一個樹形結構拖放工作如下：

頂級組件

• CSS ViewEncapsulation.None，包括任何css
• Dragula指令
• DragulaService ViewProvider

• 在dragula服務上注冊一個accepts過濾器，可以阻止項目被丟棄

   accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => { return !el.contains(target); // elements can not be dropped within themselves }, 

• 在dragula服務上注冊moves過濾器，以便整個項目一起移動

   moves: (el: Element, container: Element, handle: Element): boolean => { // only move favorite items, not the icon element return el.tagName.toLowerCase() === 'mvp-navigation-item'; }, 

• Html模板看起來像這樣

   <div class="nav--favorites__root" [class.is-dragging]="isDragging" [dragula]="'favorites'" [dragulaModel]="favoriteLinks"> <navigation-item *ngFor="let link of links" [link]="link"> </navigation-item> </div> 

導航項目組件

• Dragula指令
• 沒有DragulaService ViewProvider

• Html模板看起來像這樣

   <a href class="list-group-item" linkActive="active" [linkTo]="link?.url" (click)="followLink($event, link)"> <span class="glyphicon glyphicon-{{link?.icon ? link?.icon : 'unchecked'}}"></span> <span class="nav__label">{{link?.label}}</span> </a> <div *ngIf="link?.children" class="list-group list-group-inverse nav--favorites__submenu" [class.is-expanded]="link?.isExpanded" [class.is-empty]="link?.children?.length === 0" [dragula]="'favorites'" [dragulaModel]="link?.children"> <navigation-item *ngFor="let childLink of link?.children" [link]="childLink"> </navigation-item> <!-- the nav favorites items must be the first elements in the dragula container or the model sync gets confused --> <a class="btn btn-link toggle" (click)="link.isExpanded = !link.isExpanded; $event.preventDefault();"><span class="glyphicon glyphicon-triangle-{{link?.isExpanded ? 'top' : 'bottom'}}"></span></a> </div> 

在拖動項目時，您需要設置樣式以使.nav - favorites__子菜單作為放置目標可見。