问题
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.
Stackblitz Fork for 1.5.0
Stackblitz Fork for 2.1.1
Relevant code to notice:
1.5.0 (not working)
(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 (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')
});
(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
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?
回答1:
Do you want: create group & use drop functionality together?
We use createGroup
together with drop
but with one small difference but with small difference - drop services is added inside Subscription, but I don't think this has any matters. So our code is hire:
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 others work perfectly on you Stackblitz example. If you uncomment:
this.dragulaService.createGroup("dnd", {
moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});
your labels is not draggable so you get what you need.
回答2:
Here is what worked for me.
import these dependencies.
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs/Subscription';
.ts file -
MANY_ITEMS = 'MANY_ITEMS';
subs = new Subscription();
constructor(private dragula: DragulaService) {
this.subs.add(dragula.dropModel(this.MANY_ITEMS)
.subscribe(({ el, target, source, sourceModel, targetModel, item }) => {
console.log(el, target, source, sourceModel, targetModel, item);
})
);
}
.html file -
<ul [(dragulaModel)]='arrayList' [dragula]="MANY_ITEMS">
<li>one</li>
<li>two</li>
</ul>
you will be able to drag the 'one' and 'two' list items.
来源:https://stackoverflow.com/questions/54742868/ng2-dragula-setoptions-and-drop-version-problem