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

7
votes

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.

2
angularangular-materialangular-cdk
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 – Eliseo
@Eliseo It doesn't really do what I want and sets a delay on the main div as well. Thanks for your help, though! – Gaetitan
I know it's too late, I just answer to a question in stackoverflow.com/questions/62304645/… and you can use one variable "itemselected" and [cdkDragDisabled]="itemselected==i" – Eliseo
@Gaetitan Did you ever find a proper solution for this? – String Name
@StringName Unfortunately I didn't, so I left it as is. – Gaetitan

2 Answers

7
votes

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

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.