javascript - drop - Cómo arrastrar/soltar a múltiples componentes Angular2 usando ng2-dragula

dragula angular 6

Question

Tengo un componente Angular2 que usa ng2-dragula para arrastrar / soltar así:

@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>
  `
})

Mi problema: si creo un componente múltiple "my-comp", el elemento dentro de "card-bag" no puede arrastrar / soltar a través de estos componentes aunque tengan el mismo nombre de bolsa. Estos elementos solo pueden arrastrar / soltar dentro de su propio componente.

¿Tenemos configuraciones para arrastrar / soltar entre los componentes, o esta es la limitación ng2-dragula?

Gracias.

Answer 1

Si no está utilizando [dragulaModel] entonces arrastrar y colocar entre los componentes anidados funciona bien siempre y cuando solo configure viewProviders: [ DragulaService ] una vez en el componente superior / raíz.

Recuerde no configurar viewProviders: [ DragulaService ] en otros componentes, ya que crea nuevas instancias para cada componente.

Editar: Recientemente he implementado el escenario dado usando el ng2-dnd npm. Es mejor que ng2-dragula y ofrece fácil acceso de objetos y otras cosas. Podría resolver su problema.

Answer 2

Tengo una estructura de árbol arrastrando y soltando trabajando así:

Componente de nivel superior

• CSS ViewEncapsulation.None, incluye cualquier css aquí
• Directiva Dragula
• DragulaService ViewProvider

• Registrar un filtro de aceptación en el servicio de dragula que impide que los elementos caigan dentro de sí mismos

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

• Registrar un filtro de moves en el servicio de dragula para que un elemento completo se mueva junto

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

• La plantilla Html se ve así

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

Componente del elemento de navegación

• Directiva Dragula
• No DragulaService ViewProvider

• La plantilla Html se ve así

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

Necesitará diseñar cosas para hacer que el submenú .nav - favorites sea visible como destino de colocación mientras arrastra un elemento.