ng2-dragula setOptions and drop version problem

Question

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?

Answer 1

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.

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