ng2-dragula 拖動排序
阿新 • • 發佈:2018-12-09
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); // 整個列表的元素集合
});
}
}