angular - Ng2-Dragula: Enable drag at run time

Question

So, I have this following template.

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

The function cssClass sets the class based on the type of imageCard. So it is set to draggable and non draggable based on the type of image Card. Now, I want the child component to be draggable only if its property isSelected is true only after long press and this is done dynamically. How can I achieve this ? How to make child component draggable at run time ?

Thank you.

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')
      });
    }