Apparently 1.5.0 support this.dragulaService.setOptions
while 2.1.1 doesn't and in reverse while 2.1.1 support this.dragulaService.drop
subscribe 1.5.0 doesn't.
Relevant code to notice:
1.5.0 (not working)
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 (working)
this.dragulaService.setOptions('dnd', {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
2.1.1 (working)
this.dragulaService.drop("dnd")
.subscribe(({ name, el, target, source, sibling }) => {
//content
}
2.1.1 (not working)
this.dragulaService.createGroup("dnd", {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
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
Note while there is a migration guide and changelog it does state how to replace the setOptions into create group. But it's still not working in my case.
Is there any way to use both functions? Or do I miss something obvious?
Do you want: create group & use drop functionality together?
We use createGroup
together with drop
but with one small difference - drop services is added inside Subscription, but I don't think this has any matters. So our code is here:
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}) => {
....
})
);
}
}
I think that our solutions is correct in according with documentation about events: https://github.com/valor-software/ng2-dragula#events
Finally I think that your problem is an error with class name because everything else works perfectly on you Stackblitz example. If you uncomment:
this.dragulaService.createGroup("dnd", {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
your labels are not draggable so you get what you need.