是否可以禁用在 cdkDrag 的子元素上拖动？

Question

我正在使用来自 Angular Material 的 Angular CDK 拖放（请参阅此处的文档）。我想知道是否可以禁用cdkDrag. 问题是无法input使用鼠标选择可拖动元素中写入的内容。

所以，我想要做的是禁止拖动input具有cdkDrag指令的元素下的所有元素。

我试过使用：

• cdkDragHandle：这会将拖动放在特定元素上，而不是我想在这里做的
• cdkDragDisabled：这将禁止拖动整个元素，而不是我想在这里做的

这是我的代码的样子：

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

提前感谢您的帮助和时间。

Answer 1

您可以在表单字段上停止 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>