我正在使用来自 Angular Material 的 Angular CDK 拖放(参见文档 here)。我想知道是否有可能 禁止拖动 cdkDrag
的子元素 .问题是无法选择 input
中所写的内容。使用鼠标拖动的元素。
所以,我想做的是禁止拖动所有 input
在具有 cdkDrag
的元素下指令 .
我试过使用:
这是我的代码的样子:
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let element of array" cdkDrag>
<div>
<mat-form-field>
<mat-label>Input 1</mat-label>
<input matInput type="text">
</mat-form-field>
<mat-form-field>
<mat-label>Input 2</mat-label>
<input matInput type="number">
</mat-form-field>
</div>
</div>
</div>
提前感谢您的帮助和时间。
最佳答案
您可以在表单字段上停止 mousedown 事件传播。将以下内容添加到表单字段元素:(mousedown)="$event.stopPropagation()"。
当您尝试单击表单域时,这会阻止拖动事件发生,并让您与该表单域正常交互。
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let element of array" cdkDrag>
<div>
<mat-form-field>
<mat-label>Input 1</mat-label>
<input matInput type="text"(mousedown)="$event.stopPropagation()">
</mat-form-field>
<mat-form-field>
<mat-label>Input 2</mat-label>
<input matInput type="number"(mousedown)="$event.stopPropagation()">
</mat-form-field>
</div>
</div>
</div>
关于angular - 是否可以禁用在 cdkDrag 的子元素上拖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62083105/