是否可以禁用在 cdkDrag 的子元素上拖动? [英] Is it possible to disable dragging on a sub-element of cdkDrag?

问题描述

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

所以，我想要做的是禁用所有 input 的拖动，这些 input 位于具有 cdkDrag 指令的元素下.

我尝试使用:

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

这是我的代码的样子:

<div *ngFor="let 数组元素" cdkDrag><div><mat-form-field><mat-label>输入 1</mat-label><input matInput type="text"></mat-form-field><mat-form-field><mat-label>输入 2</mat-label><input matInput type="number"></mat-form-field>

预先感谢您的帮助和时间.

解决方案

您可以在表单字段上停止 mousedown 事件传播.将以下内容添加到表单字段元素:(mousedown)=$event.stopPropagation()".

这会阻止在您尝试单击表单域时发生拖动事件，并让您与该表单域正常交互.

<div *ngFor=让数组元素"cdkDrag><div><mat-form-field><mat-label>输入 1</mat-label><input matInput type=text"(mousedown)=$event.stopPropagation()"></mat-form-field><mat-form-field><mat-label>输入 2</mat-label><input matInput type=number"(mousedown)=$event.stopPropagation()"></mat-form-field>

I am using Angular CDK drag-drop from Angular Material (see documentation here). I was wondering if it is possible to disable dragging on a sub-element of cdkDrag. The problem is it is impossible to select what is written in an input of the draggable element using the mouse.

So, what I want to do is to disable dragging on all the input which are under the element which has the cdkDrag directive.

I have tried using:

• cdkDragHandle: that would put the dragging on a specific element, not what I want to do here
• cdkDragDisabled: that would disable dragging the whole element, not what I want to do here

Here is what my code looks like:

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

Thanks in advance for your help and time.

解决方案

You can stop the mousedown event propagation on your form fields. Add the following to the form field element: (mousedown)="$event.stopPropagation()".

This stops the drag event from happening when you try to click into a form field and lets you interact normally with that form field.

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

这篇关于是否可以禁用在 cdkDrag 的子元素上拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！