Ng2-Dragula: включить перетаскивание во время выполнения

Question

Итак, у меня есть следующий шаблон.

<div dragula="'card-images'" [dragulaModel]="images">
  <child-component [card]="imageCard" [ngClass]="cssClass(card)" *ngFor="let imageCard of images"></child-component>
</div>

Функция cssClass устанавливает класс на основе типа imageCard. Таким образом, он устанавливается перетаскиваемым и не перетаскиваемым в зависимости от типа изображения карты. Теперь я хочу, чтобы дочерний компонент был перетаскиваемым, только если его свойство isSelected равно true только после долгого нажатия, и это делается динамически. Как мне этого добиться? Как сделать дочерний компонент перетаскиваемым во время выполнения?

Спасибо.

Answer 1

Вы можете предоставить moves функция и поставить условие, когда элементы должны быть перетаскиваемыми.

В вашем случае вы можете сделать это в два этапа -

1. Добавьте класс к элементу на основе свойства.

<child-component [ngClass]="{'no-drag' : card.selected != true}"></child-component>

2. перетащите элемент, если у него нет класса no-drag,

  constructor(private dragulaService: DragulaService) {
      dragulaService.setOptions('card-images', {
        moves: (el, source, handle, sibling) => !el.classList.contains('no-drag')
      });
    }