Как использовать функцию перетаскивания Dragula в качестве прослушивателя событий для обновления порядка массива - PullRequest
Новая
       28

Как использовать функцию перетаскивания Dragula в качестве прослушивателя событий для обновления порядка массива

0 голосов
/ 17 мая 2019

Я пытаюсь обновить порядок массива изображений при перетаскивании с помощью dragula с Angular. Я просмотрел документы, но в растерянности и получаю эту ошибку: «Невозможно вызвать выражение, тип которого не имеет сигнатуры вызова. Тип« EventEmitter »не имеет совместимых сигнатур вызовов». При чтении документов были упоминания об экземпляре drake, и мне интересно, нужно ли это добавить? Любая помощь / совет с благодарностью.

В конечном счете, я просто хочу отключить функцию сохранения (с новым порядком массива) для события drop. Похоже на простую легкую вещь, но у меня было много проблем, чтобы заставить событие drop работать. 

import { Component, OnInit, OnDestroy } from 
'@angular/core';
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';

@Component({
selector: 'app-images',
templateUrl: './images.component.html',
styleUrls: ['./images.component.scss']
  })

export class ImagesComponent implements OnInit, OnDestroy {
subs = new Subscription();

constructor(
    private notifyService: NotifyService,
    private propertiesService: PropertiesService,
    private dragulaService: DragulaService
  ) { }
ngOnInit() {
this.subs.add(this.dragulaService.drop('images')
        .subscribe(({ name, el, target, source, sibling }) => {
            // fire a save function to update new array order
        })
    );
  }
ngOnDestroy() {
    // destroy all the subscriptions at once
    this.subs.unsubscribe();
  }
}

1 Ответ

0 голосов
/ 20 мая 2019

Я думаю, что drake - это легкий путь, но я думаю, что вы делаете это неправильно.Простой пример ниже:

Прежде всего вы должны создать группу, поэтому в конструкторе добавьте: 

this.dragulaService.createGroup('IMAGES', {});

На следующем шаге добавьте эту группу в контейнер HTML-элемента (родительский)для ваших предметов).В этом примере: 

<div class="images-container" dragula="IMAGES">
   <img src="a.png">
   <img src="b.png">
</div>

И, наконец, вы можете использовать drake: 

this.dragula$.add(this.dragulaService.drop('IMAGES')
    .subscribe(({name, el, target, source, sibling}) => {
          // hire is your code
        })
    );

Это должно работать.Если у вас возникли проблемы, пожалуйста, создайте для этого демо-версию StackBlitz - я посмотрю на это.

...