显然 1.5.0 支持 this.dragulaService.setOptions
而 2.1.1 不支持,相反,而 2.1.1 支持 this.dragulaService.drop
订阅 1.5.0 没有。
Stackblitz Fork for 1.5.0
Stackblitz Fork for 2.1.1
需要注意的相关代码:
1.5.0(不工作)
(Error) :
Cannot invoke an expression whose type lacks a call signature. Type 'EvenEmitter' has no compatible call signatures. (property) AppComponent.dragulaService: DragulaService
this.dragulaService.drop("dnd")
.subscribe(({ name, el, target, source, sibling }) => {
//content
}
1.5.0(工作)
this.dragulaService.setOptions('dnd', {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
2.1.1(工作)
this.dragulaService.drop("dnd")
.subscribe(({ name, el, target, source, sibling }) => {
//content
}
2.1.1(不工作)
this.dragulaService.createGroup("dnd", {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
(Error) :
Argument of type '{moves: (el: any, source: any, handle: any, sibling: any) => boolean; }' is not assignable to parameter of type 'DragulaOptions'. Object literal may only specify known properties, and 'moves' does not exist in type 'Dragula Options'. (parameter) handle: any
请注意,虽然有 migration guide和 changelog确实如此 state how to replace the setOptions into create group .但在我的情况下它仍然不起作用。
有没有办法同时使用这两个功能?还是我错过了一些明显的东西?
最佳答案
您想要:创建组并同时使用放置功能吗?
我们使用 createGroup
连同drop
但有一个微小的区别,但有微小的不同 - 在订阅中添加了删除服务,但我认为这没有任何关系。所以我们的代码是雇佣:
export class xxxComponent implements OnInit {
...
public dragula$: Subscription
...
constructor(public dragulaService: DragulaService) {
this.dragulaService.createGroup('ITEMS', {
direction: 'vertical',
moves: (el, source, handle): boolean => handle.className.indexOf('item-keeper') > -1
});
}
ngOnInit() {
this.dragula$.add(this.dragulaService.drop('ITEMS')
.subscribe(({name, el}) => {
....
})
);
}
}
我认为我们的解决方案根据有关事件的文档是正确的:
https://github.com/valor-software/ng2-dragula#events
最后,我认为您的问题是类名错误,因为其他所有内容都可以在您的 Stackblitz 示例上完美运行。如果您取消注释:
this.dragulaService.createGroup("dnd", {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
您的标签不可拖动,因此您可以获得所需的内容。
关于angular - ng2-dragula setOptions 和 drop 版本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54742868/