Setting [dragula] to null doesn't disable dragging

[JosephSKh]

I need to disable draggin in a certain state and setting [dragula] to null OR undefined doesn't do so

any ideas?
thx

[ghost]

Hi @JosephSKh, I did this:

1. Label the elements that you want to disable with their own class, like class="no-drag"

2. Set the "moves" option by calling the "setOptions" service in your constructor like this:

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

[JosephSKh]

@josiahaltschuler thank you for your reply, yes actually I've done this at last, but it just wasn't the solution I want to head to because of some requirements, I still need to fix this later , but thx man for your solution :)

[ghost]

@JosephSKh No problem!

[renehamburger]

Another (and probably cleaner) way of achieving the same is to provide two instances of the wrapper element, one with and one without dragula attributes, and move the content of the wrapper into an <ng-template> (or in Angular2), e.g.:

<div *ngIf="draggable"
     [dragula]="bagName"
     [dragulaModel]="collection">
  <ng-container *ngTemplateOutlet="items"></ng-container>
</div>
<div *ngIf="!draggable">
  <ng-container *ngTemplateOutlet="items"></ng-container>
</div>
<ng-template #items>
  <ng-container *ngFor="let item of collection">
    ...
  </ng-container>
</ng-template>

[renehamburger]

In Angular4+, it should be possible to use else to simplify this further:

<div *ngIf="draggable; else items" [dragula]="bagName" [dragulaModel]="collection">
  <ng-container *ngTemplateOutlet="items"></ng-container>
</div>
<ng-template #items>
  <ng-container *ngFor="let item of collection">
    ...
  </ng-container>
</ng-template>

[cormacrelf]

Is that really cleaner though? Not really. HTML is the least clean part of Angular. Keep in in TS.

But yes, there should be an easier way. Probably similar to the destruction logic in #794.

[cormacrelf]

In v2, you'll be able to just set [dragula] to null.

Update: you can do that now.

[chetankh23]

@renehamburger The solution you posted above, so does it make component draggable at run time ?

[AnthonyLenglet]

In v2, you'll be able to just set [dragula] to null.

Update: you can do that now.

this is something we can do, however it throws an error if dragulaModel is set

[dragula]="hasEditPermissions ? 'bagName' : null"
[(dragulaModel)]="items"

Cannot destructure property `drake` of 'undefined' or 'null'.

...
else if (changes && changes.dragulaModel) {
  const { previousValue: prev, currentValue: current, firstChange } = changes.dragulaModel;
  const { drake } = this.group;
...

[barbaldo]

@AnthonyLenglet
I circumvented that issue with a different approach:
[dragula]="condition ? 'items' : null" [dragulaModel]="condition ? items: null" dragulaModelChange)="reorderItems($event)"

I get that it's not a proper solution, but it does circumvent the error; Also in my case the method reorderItems() was already needed for other operations. Not sur about your situation but it may help.

[rmur]

For a newer version I have added it the following way :

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