15

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.

Gaetitan
  • 284
  • 1
  • 6
  • 16
  • you can add a delay of,e.g. 150 miliseconds or 200 milliseconds`
    ` This give you a change to select the text
     – Eliseo May 29 '20 at 10:11
  • @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 May 29 '20 at 13:30
  • I know it's too late, I just answer to a question in https://stackoverflow.com/questions/62304645/display-and-update-formgroup-inside-formarray and you can use one variable "itemselected" and [cdkDragDisabled]="itemselected==i" – Eliseo Jun 10 '20 at 17:18
  • @Gaetitan Did you ever find a proper solution for this? – String Name Apr 26 '21 at 07:42
  • @StringName Unfortunately I didn't, so I left it as is. – Gaetitan Apr 26 '21 at 19:31

2 Answers2

15

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>
Bryan Sullivan
  • 318
  • 2
  • 7
-1

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.

Ion Prodan
  • 209
  • 2
  • 7