Korzystanie NG2-Dragula przeciągnij i sieci wymiany wymienia

Question

Mam siatki list i staram się przeciągać i zamienić płytek siatki ze sobą za pomocą NG2-Dragula

some.component.html

<md-grid-list rowHeight="200px" id = "cover" > 
     <md-grid-tile *ngFor="let werbedata of werbedaten" 
     [class.selected]="werbedata === selectedWerbedata" 
     [routerLink]="['/flyerdetail',werbedata.artnr]" 
     [style.background]="'lightblue'" class = "blocks" 
     [dragula]='"bag-one"'> 

    <md-list class="example-card"> 
     <md-list-item>Produktname: {{ werbedata.werbetext }}</md-list-item> 
     <md-list-item>Euro: {{ werbedata.euro }}</md-list-item> 
     <h3 md-line> Artnr: {{ werbedata.artnr }} </h3> 
     <p md-line> Werbetext: {{ werbedata.werbetext }} </p> 
    </md-list> 

    </md-grid-tile> 
</md-grid-list> 

some.component.ts

export class FlyerComponent implements OnInit { 
    werbedaten: WerbeData[]; 
    selectedWerbedata: WerbeData; 

    constructor(private werbedatenService: WerbeDatenService){}; 

    ... 
    ... 
} 

Mój pomysł był do wymiany danych w przypadku upuszczania. Czy istnieje zdarzenie onDrop, które można dodać do takiego kodu HTML?

(onDrop) = "swap(data)" a następnie wykonaj swap(data:any) w klasie komponentów?

lub czy muszę zainicjować dragulaservice? Czy istnieje lepszy sposób na zamianę?

Jestem absolutnie nowy w kanciastości i uważam to za absurdalnie trudne do naśladowania. Każda wskazówka byłaby bardzo doceniana?

Answer 1

W celu łatwego przeciągania z jednej listy na drugą przy pomocy ng2-dragula nie trzeba podejmować żadnych działań, dyrektywy te dotyczą tego. Przełączanie z jednej listy na inną nie wydaje się być obsługiwane, ale zapewniłem prosty typ i mam nadzieję, że to pomoże ci przejść.

Po pierwsze, upewnij się, że jest wliczone w app.module.ts poprawnie

import { DragulaModule } from 'ng2-dragula'; 
... 
@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     DragulaModule, 
     ... 
    ], 
    providers: [], 
     bootstrap: [AppComponent] 
    }) 

export class AppModule {} 

W komponentu trzeba tworzyć swoje listy. Może być również konieczne dołączenie pliku css z node_modules/dragula/dist/dragula.css.

Dodałem powiązanie z wydarzeniem drop, ponieważ to, co Cię interesowało. Ten scenariusz po prostu wypisuje nowe listy na konsolę i demonstruje wiązanie dwukierunkowe.

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css', './dragula.min.css'] 
}) 

export class AppComponent { 

    list1: number[] = [1, 2, 3, 4]; 
    list2: number[] = [5, 6, 7, 8]; 

    constructor(private dragulaService: DragulaService) { 
     dragulaService.drop.subscribe((value) => { 
      this.onDrop(value.slice(1)); 
     }); 
    } 

    private onDrop(args) { 
     console.log(this.list1); 
     console.log(this.list2); 
    } 
} 

W szablonie trzeba dodać dragula i dragulaModel dyrektyw, które zapewniają powiązanie dwukierunkowe dane. Uwaga: obie listy mają tę samą "torbę".

<ul [dragula]='"bag-one"' [dragulaModel]='list1'> 
    <li *ngFor="let item of list1">{{ item }}</li> 
</ul> 
<ul [dragula]='"bag-one"' [dragulaModel]='list2'> 
    <li *ngFor="let item of list2">{{ item }}</li> 
</ul>