如何基于 [sortablejs] 使按钮启用/禁用答案

【问题标题】：How to make button enable/disable based on [sortablejs]如何基于 [sortablejs] 使按钮启用/禁用
【发布时间】：2018-12-28 10:10:24
【问题描述】：

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

<div   [sortablejs]="actionList"> 

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

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

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

如何使该按钮仅在用户进行拖放时启用这里我使用 SortablejsModule 来实现列表的拖放功能

【问题讨论】：

如果拖放事件成功则获取拖放事件，初始创建全局变量设置为false，获取成功事件后为true。并在按钮上使用[disabled]="variable_name"
我关心的是如何获取拖放事件，请告诉我
@Abhishek 我关心的是如何获得拖放事件，请告诉我
你能提供我最小的https://stackblitz.com/吗？
给你github.com/SortableJS/… 然后在你的外部div上设置[sortablejsOptions]="options" 并继续@Abhishek 的想法

标签： angular drag-and-drop sortablejs

【解决方案1】：

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

在你的html

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

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

在你的.ts

从 'angular-sortablejs' 导入 { SortablejsOptions };

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

}

【讨论】：