NG2-dragulaを使用して、私はリストのグリッドを持っており、お互いにグリッドのタイルをドラッグして、交換しようとしていますドラッグするNG2-dragulaを使用してスワップグリッドは

Question

を示しています

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){}; 

    ... 
    ... 
} 

は、私の考えではDropイベントにデータを交換することでした。このようなHTMLに追加できるonDropイベントはありますか？

(onDrop) = "swap(data)"コンポーネントクラスでswap(data:any)を実行しますか？

または、私はdragulaserviceを初期化する必要がありますか？代わりにスワップするより良い方法はありますか？

私はまったく新しい角度にあります。どのようなヒントをいただければ幸いですか？

Answer 1

ng2-dragulaを使用して1つのリストから別のリストに単純にドラッグする場合、どのイベントにも対処する必要はありません。ディレクティブはそれを処理します。あるリストから別のリストへのスワッピングはサポートされていないようですが、シンプルなセットプを提供しています。

まず、それはあなたがあなたのリストを作成する必要があり、あなたのコンポーネントには、あなたのapp.module.ts正しく

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

export class AppModule {} 

に含まれていることを確認してください。 node_modules/dragula/dist/dragula.cssのcssファイルも含める必要があります。

私はdropイベントにバインドを追加しました。あなたの興味をそそられたものです。このシナリオでは、単に新しいリストをコンソールに出力し、双方向バインディングを実演します。テンプレートで

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

あなたは、双方向のデータバインディングを提供dragulaとdragulaModelディレクティブを追加する必要があります。両方のリストに同じ「バッグ」があることに注意してください。

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