How to make button enable/disable based on [sortablejs]

Question

I have a list which has Drag and Drop feature

<div   [sortablejs]="actionList"> 

<div *ngFor="let data of actionList | filterBy: searchValue;let i = index">

And a button like below

<button  (click)="save()">  Save</button>

How to make this button enable only when drag and drop is made by user Here I am using SortablejsModule for drag and drop feature for the list

Answer 1

you can drageableOption as params like this and attach a function when drag and drop event happen.

in your html

<div   [sortablejs]="actionList" [sortablejsOptions]="draggableOptions"> 

<div *ngFor="let data of actionList | filterBy: searchValue;let i = index">

and in your .ts

import { SortablejsOptions } from 'angular-sortablejs';

export class StockMovementComponent implements OnInit{

disableButton: boolean = true;

draggableOptions : SortablejsOptions = {
    animation: 150,
    onUpdate: () => this.dragDropDataSuccess(),
    scroll: true,
    scrollSensitivity: 100
  };

constructor(){}

ngOnInit() {}

dragDropDataSuccess(){
this.disableButton = false;
}

}