我正在使用 Angular Material 中的 Angular CDK 拖放（请参阅文档here https://material.angular.io/cdk/drag-drop/overview）。我想知道是否有可能禁用在子元素上拖动cdkDrag。问题是无法选择其中写入的内容input使用鼠标拖动元素。
所以，我想做的是禁用所有的拖动input它们位于具有以下元素的元素下cdkDrag指示.
我尝试过使用：
-
cdk拖拽句柄：这会将拖动放在特定元素上，而不是我想要在这里做的
-
cdk拖动禁用：这将禁用拖动整个元素，而不是我想要在这里做的
我的代码如下所示：
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
