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

Question

我正在使用来自 Angular Material 的 Angular CDK 拖放(参见文档 here)。我想知道是否有可能 禁止拖动 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>