Is it possible to disable dragging on a sub-element of cdkDrag?

Question

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.

Superscribe

you can add a delay of,e.g. 150 miliseconds or 200 milliseconds<div *ngFor="let element of array" cdkDrag [cdkDragStartDelay]="150" > This give you a change to select the text – Hype

@Hype It doesn't really do what I want and sets a delay on the main div as well. Thanks for your help, though! – Superscribe

I know it's too late, I just answer to a question in #62305145 and you can use one variable "itemselected" and [cdkDragDisabled]="itemselected==i" – Hype

@Superscribe Did you ever find a proper solution for this? – Aureus

@StringName Unfortunately I didn't, so I left it as is. – Superscribe

Answer 1

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>

Inexpressible

This is exactly what I was looking for, thanks very much! – Aesthetically

Answer 2

Here's a simple workaround:

app.component.css

.display-none {
  display: none;
}

app.component.html

<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" cdkDrag cdkDragPreviewClass="display-none">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Input 2</mat-label>
                <input matInput type="number" cdkDrag cdkDragPreviewClass="display-none">
            </mat-form-field>
        </div>
    </div>
</div>

Just add cdkDrag cdkDragPreviewClass="display-none" to your input elements. That should help you.

Lhary

Looks like cdkDrag on the input makes the input draggable. – Superscribe

That's right, but it'll be destroyed once there's a display: none style. – Lhary

I tried your solution but it seems that cdkDragPreviewClass doesn't exist. Did you mean <input cdkDrag *cdkDragPreview class="display_none">? – Superscribe

Make sure to add .display-none { display: none; } to component styles – Lhary