angular - ng2-dragula を使用してグリッド リストをドラッグおよびスワップする

Question

リストのグリッドがあり、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 ){};

    ...
    ...
}

私のアイデアは、ドロップ イベントでデータを交換することでした。このように HTML に追加できる onDrop イベントはありますか?

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

それともdrugulaserviceを初期化する必要がありますか? 代わりに交換するより良い方法はありますか？

私はAngularにまったく慣れていないので、これを理解するのがとてつもなく難しいと感じています。どんなヒントでも大歓迎ですか？