angular - 如何基于 [sortablejs] 使按钮启用/禁用
问题描述
我有一个具有拖放功能的列表
<div [sortablejs]="actionList">
<div *ngFor="let data of actionList | filterBy: searchValue;let i = index">
还有一个像下面这样的按钮
<button (click)="save()"> Save</button>
如何仅在用户进行拖放时启用此按钮这里我使用SortablejsModule进行列表的拖放功能
解决方案
您可以像这样将 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;
}
}
推荐阅读
- python - 连接 3 个“功能”而不是分开保存
- java - Java内核无法连接到jupyter notebook
- python - Python 受限 API:如何设置扩展类型的 __module__ 属性
- react-native - 反应原生地图 UrlTile 不适用于 Android 上的 openstreetmap url
- python - Python Newbie – 如何让运行 Python 3 的 VS Code 只显示代码的结果?
- python - 没有 xtick 和 ytick 显示 matplotlib 面向对象
- php - Symfony API 两步验证
- javascript - Javascript排序列表仅适用于onve
- java - Mapstruct 抽象映射器无法在单元测试中模拟组件
- java - 是否可以通过调用方法添加数组元素?