ng2-dragula setOptions and drop version problem

白昼怎懂夜的黑 提交于 2019-12-11 10:25:01

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!