我正在使用dragula进行拖放功能。它可以工作直到我从服务器端刷新我的列表：
this.columnList = newValue;
它缝制，Dragula希望像以前一样保留列表中的订单，以使服务器端排序顺序弄乱。我不需要此功能。我已经阅读了文档，教程，示例，但找不到如何在Dragula中禁用自动排序。
我非常相信没有自动排序，至少默认情况下。最小的自我包含的例子是我们的朋友。好吧，无论网络如何使用更多的示例，尽管难以证明负面的示例，但我会证明，在默认情况下，没有自动分类，并尝试猜测问题所在的位置。
对不起，只有在我意识到您正在使用纯JS，并且可能使用AngularJs而不是Angular2。无论以下情况如何仍然有用。
首先，我们需要一个简单的代码库，让我们使用angular-cli创建基础(https://www.npmjs.com/package/angular-cli(：然后关注如何使用ng2--Dragula，我们将拥有完全相同的起始基地。
现在替换 App.component.html 的内容：
<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));
}
}
如果在上面运行上面的内容，您会发现该模型与列表同步，如显示的项目状态按钮。但是，如果我们从 app.component.html 中删除[dragulaModel]="items">我们会发现该模型未同步。这不是Dragula在做额外的事情，而是在做一些少的事情。
现在解决问题...
同步当地状态时，我们可以尝试几种方法：
首先要注意，在添加[dragulaModel]="items"时，确实将列表与数组同步，但我们仍然需要定制服务器同步代码的钩子，稍后再详细介绍。
如果我们忽略了Dragula框架，并且可能尝试为项目创建Getter Setter。但是，如果我们将所有项目实例重命名为_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;
}
但是，上面将无法正常工作，或者它可以工作，但要查看控制台日志，表明六个固定器被调用一次，然后使用Getter完成所有后续访问如果用户徘徊并移动可能会在几秒钟内生成数百个呼叫，则被称为多次。此外，可以让用户知道是否需要保存页面，在潜在无限列表上进行比较，不确定的次数听起来并不是一个好主意，虽然有可能有可以解决此dragula的纯java/typeScript解决方案提供了一种方法，可以在删除项目时仅一次进行检查。
添加以下代码，替换构造函数，并删除该设置器/Getter，因为这是一个愚蠢的主意(我们真的只是对下降部分感兴趣，但完整性永远不会受到伤害(：
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-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
}
您应该有一个不错的工作解决方案。