angularng2-dragula

ng2-dragula setOptions and drop version problem


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?


Solution

  • 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.