CODEWITHSUNDEEP
angularangular-materialangular-cdk
Gaetitan
Gaetitan

Reputation: 324

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

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:

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.

Upvotes: 17

Views: 6249

Answers (2)

Bryan Sullivan
Bryan Sullivan

Reputation: 506

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>

Upvotes: 18

Ion Prodan
Ion Prodan

Reputation: 207

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.

Upvotes: -2

Related Questions