How to drag / drop multiple Angular2 components with ng2-dragula

Question

I have an Angular2 component using ng2-dragula to drag and drop:

@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 problem: if I create several components of "my-comp", the element inside the "card-bag" cannot drag / drop this component, although they have the same bag name. This item can only drag it inside its component.

Do we have any configurations for dragging and dropping components, or is this a limitation of ng2-dragula?

Thanks.

Answer 1

If you do not use [dragulaModel] , then dragging between nested components works well, as long as you only set viewProviders: [ DragulaService ] once in the top / root component.

Remember to set viewProviders: [ DragulaService ] to other components as it creates new instances for each component.

Edit: I recently implemented this script using the ng2-dnd npm package. Its better than ng2-dragula, and offers easy object transfer and other things. This may solve your problem.

Answer 2

I got a tree structure drag and drop as follows:

Top level component

• CSS ViewEncapsulation.None, include any css here
• Dragula Directive
• DragulaService ViewProvider

• Register accepts filter in accepts service, which does not allow elements to be packed internally

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

• Registering the moves filter in dragula so that the whole element moves together

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

• The HTML template looks like this:

   <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> 

Navigation item component

• Dragula Directive
• No DragulaService ViewProvider

• The HTML template looks like this:

   <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> 

You will need to style things to make .nav - favorite__submenu visible as the target when you drag the item.