nG2-dragula setOptions и проблема удаления версии

Question

Видимо поддержка 1.5.0 this.dragulaService.setOptions в то время как 2.1.1 нет и наоборот, в то время как поддержка 2.1.1 this.dragulaService.drop подписаться на 1.5.0 нет.

Stackblitz Fork для 1.5.0

Stackblitz Fork для 2.1.1

Соответствующий код для уведомления:

1.5.0 (не работает)

(Ошибка):

Невозможно вызвать выражение, тип которого не имеет подписи вызова. Тип 'EvenEmitter' не имеет совместимых подписей вызовов. (свойство) AppComponent.dragulaService: DragulaService

this.dragulaService.drop("dnd")
      .subscribe(({ name, el, target, source, sibling }) => {
      //content
}

1.5.0 (работает)

this.dragulaService.setOptions('dnd', {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

2.1.1 (работает)

this.dragulaService.drop("dnd")
    .subscribe(({ name, el, target, source, sibling }) => {
    //content
}

2.1.1 (не работает)

this.dragulaService.createGroup("dnd", {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

(Ошибка):

Аргумент типа '{move: (el: any, source: any, handle: any, sibling: any) => boolean; }'нельзя назначить параметру типа'DragulaOptions'. Объектный литерал может указывать только известные свойства, а "ходы" не существуют в типе "Параметры Dragula". дескриптор (параметра): любой

Обратите внимание, что хотя есть руководство по миграции и журнал изменений, в нем указано, как заменить setOptions в группу создания. Но это все еще не работает в моем случае.

Есть ли способ использовать обе функции? Или я что-то упускаю очевидное?

Answer 1

Вы хотите: создать группу и использовать функциональность drop вместе?

Мы используем createGroup вместе с drop но с одним небольшим отличием, но с небольшим отличием - сервисы отбрасывания добавляются в подписку, но я не думаю, что это имеет какое-либо значение. Итак, наш код найма:

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}) => {
                ....
            })
        );
    }

}

Я думаю, что наши решения правильны в соответствии с документацией о событиях: https://github.com/valor-software/ng2-dragula

Наконец, я думаю, что ваша проблема - ошибка с именем класса, потому что все остальные отлично работают на вашем примере Stackblitz. Если вы раскомментируете:

    this.dragulaService.createGroup("dnd", {
      moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
    });

Ваши ярлыки не перетаскиваются, поэтому вы получаете то, что вам нужно.

Answer 2

Вот что сработало для меня.

импортировать эти зависимости.

import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs/Subscription';

.ts файл -

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 файл -

<ul [(dragulaModel)]='arrayList' [dragula]="MANY_ITEMS">
  <li>one</li>
  <li>two</li>
</ul>

Вы сможете перетаскивать элементы списка "один" и "два".