1、使用元件模式

html檔案

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <ul dragula="VAMPIRES" [(dragulaModel)]="vampires" (dragulaModelChange)="dragFun($event)">
      <li *ngFor="let vamp of vampires">
        {{ vamp.name }} likes {{ vamp.value }}
      </li>
    </ul>
  </div>

  <div class="container" dragula="HANDLES" id="left">
    <div *ngFor="let vamp of vampires">
      <div class="handle">{{vamp.name}}</div>
      <div class="contents">Other content</div>
    </div>
  </div>
</ion-content>
 

ts檔案

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
@Component({
  selector: "page-home",
  templateUrl: "home.html",
})
export class HomePage {
  vampires: any;
  constructor(
    public navCtrl: NavController
  ) {
    this.vampires = [
      {
        name: "zxc",
        value: 30
      },
      {
        name: "lzy",
        value: 5
      },
      {
        name: "cbr",
        value: 3
      },
      {
        name: "hp",
        value: 7
      }
    ];
  }
  // 拖動返回的是所有列表重新排序後的陣列
  dragFun(event) {
    console.log(event);
  }
}
 

2、使用服務

html檔案

<div class='parent'>
  <div class='wrapper'>
    <div class='container' dragula="HANDLES">
      <div><span class='handle'>+</span>Move me, but you can use the plus sign to drag me around.</div>
      <div><span class='handle'>+</span>Note that <code>handle</code> element in the <code>moves</code> handler is
        just the original event target.
      </div>
      <div><span class='handle'>+</span>This might also be useful if you want multiple children of an element to
        be able to trigger a drag event.
      </div>
      <div><span class='handle'>+</span>You can also use the <code>moves</code> option to determine whether an
        element can be dragged at all from a container, <em>drag handle or not</em>.
      </div>
    </div>
  </div>
</div>
 

ts檔案

import { Component } from "@angular/core";
import { DragulaService } from "ng2-dragula";

@Component({
  selector: "ex-07-handle",
  templateUrl: "./07-handle.component.html",
  styles: [
    `
      .container div {
        cursor: initial !important;
      }
    `
  ]
})
export class HandleComponent {
  public constructor(private dragulaService: DragulaService) {
    // 建立 (name, option);
    dragulaService.createGroup("HANDLES", {
      moves: (el, container, handle) => {
        return handle.className === "handle";
      }
    });
    // 事件 drag drop over out
    dragulaService.drag().subscribe(value => {
      console.log(value.name);    // 整個drag的名稱
      console.log(value.el);      // 當前拖動的元素
      console.log(value.source);  // 整個列表的元素集合
    });
    dragulaService.drop().subscribe(value => {
      console.log(value.name);    // 整個drag的名稱
      console.log(value.el);      // 當前拖動的元素
      console.log(value.source);  // 整個列表的元素集合
    });
    dragulaService.over().subscribe(value => {
      console.log(value.name);    // 整個drag的名稱
      console.log(value.el);      // 當前拖動的元素
      console.log(value.source);  // 整個列表的元素集合
    });
  }
}