如何基于[sortablejs]制作按钮enable/disable

Question

我有一个具有拖放功能的列表

<div   [sortablejs]="actionList"> 

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

还有一个像下面这样的按钮

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

如何让这个按钮只有在用户拖放时才启用在这里，我使用 SortablejsModule 来实现列表的拖放功能

Answer 1

你可以像这样将 drageableOption 作为参数，并在拖放事件发生时附加一个函数。

在你的html

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

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

在你的 .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;
}

}

如何基于[sortablejs]制作按钮enable/disable

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

drag-and-drop

sortablejs

angular