我正在使用Dragula实现拖放功能。它可以正常工作,但是当我从服务器端刷新列表时就会出问题:
this.columnList = newValue;
看起来Dragula想要保留列表中的顺序,就像之前一样,所以它会搞乱服务器端的排序顺序。我不需要这个功能。我已经阅读了文档、教程和示例,但无法找到如何禁用Dragula自动排序的方法。
我正在使用Dragula实现拖放功能。它可以正常工作,但是当我从服务器端刷新列表时就会出问题:
this.columnList = newValue;
看起来Dragula想要保留列表中的顺序,就像之前一样,所以它会搞乱服务器端的排序顺序。我不需要这个功能。我已经阅读了文档、教程和示例,但无法找到如何禁用Dragula自动排序的方法。
<div><button (click)="inOrderGreekAlphabet()">In Order Greek Alphabet</button></div>
<div><button (click)="reversedGreekAlphabet()">Reversed Greek Alphabet</button></div>
<div><button (click)="displyStateOfItems()">Display state of Items</button></div>
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"' [dragulaModel]="items">
<div *ngFor="let item of items">{{item}}</div>
</div>
</div>
</div>
将app.component.ts的内容替换为:
import {Component} from '@angular/core';
import {DragulaService} from 'ng2-dragula/ng2-dragula';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
viewProviders: [DragulaService]
})
export class AppComponent {
public items: string[];
private GREEK_ALPHABET:string[] = ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi", "rho", "sigma", "tau", "upsilon", "phi", "chi", "psi", "omega"];
constructor() {
this.inOrderGreekAlphabet();
}
public inOrderGreekAlphabet(){
this.items = this.GREEK_ALPHABET.slice();
}
public reversedGreekAlphabet() {
this.items = this.GREEK_ALPHABET.reverse();
}
public displyStateOfItems(){
alert(JSON.stringify(this.items));
}
}
[dragulaModel]="items"
,我们将发现模型不再同步。这并不是 dragula 做了什么额外的事情,实际上它做了更少的事情。
[dragulaModel]="items"
可以将列表与数组同步,但我们仍需要一个钩子来执行自定义服务器同步代码,稍后再详细说明。//This is to demonstrate an issue, this is NOT A Solution!
get items():string[]{
console.log("call from getter: could do server sync here?");
return this._items;
}
set items(i:string[]){
console.log("call from setter: or perhaps here?");
this._items = i;
}
添加以下代码,替换构造函数,并删除那个setter/getter,因为它是一个愚蠢的想法(我们真正感兴趣的只是drop部分,但完整性从来没有伤害过):
constructor(private dragulaService: DragulaService) {
dragulaService.drag.subscribe((value) => {
console.log(`drag: ${value[0]}`);
this.onDrag(value.slice(1));
});
dragulaService.drop.subscribe((value) => {
console.log(`drop: ${value[0]}`);
this.onDrop(value.slice(1));
});
dragulaService.over.subscribe((value) => {
console.log(`over: ${value[0]}`);
this.onOver(value.slice(1));
});
dragulaService.out.subscribe((value) => {
console.log(`out: ${value[0]}`);
this.onOut(value.slice(1));
});
this.inOrderGreekAlphabet();
}
private onDrag(args) {
let [e, el] = args;
//do something
}
private onDrop(args) {
let [e, el] = args;
// do something
}
private onOver(args) {
let [e, el, container] = args;
// do something
}
private onOut(args) {
let [e, el, container] = args;
// do something
}
上述内容引用自https://github.com/valor-software/ng2-dragula#events,提供了手动实现同步的能力,而不使用dragulaModel
指令,但是我们也可以在该指令的基础上构建,如文档的下一部分所示(https://github.com/valor-software/ng2-dragula#special-events-for-ng2-dragula),因此,最小化地,我们只需要(在这种情况下,我们必须使用dragulaModel指令):
constructor(private dragulaService: DragulaService) {
dragulaService.dropModel.subscribe((value) => {
console.log(`dropModel: ${value[0]}`);
this.onDropModel(value);
});
this.inOrderGreekAlphabet();
}
private onDropModel(args){
let [bagName, el, target, source] = args;
//do something, such as sync items with the server.
//or setting a flag to indicate if items is different from when it was last saved
}
而且你应该会得到一个很好的工作解决方案。