Можно ли отключить перетаскивание подэлемента cdkDrag? - PullRequest
Новая
       106

Можно ли отключить перетаскивание подэлемента cdkDrag?

0 голосов
/ 29 мая 2020

Я использую Angular перетаскивание CDK из Angular Material (см. Документацию здесь ). Мне было интересно, можно ли отключить перетаскивание подэлемента cdkDrag. Проблема в том, что невозможно выбрать с помощью мыши то, что написано в input перетаскиваемого элемента.

Итак, я хочу отключить перетаскивание всех input которые находятся под элементом с директивой cdkDrag .

Я пробовал использовать:

  • cdkDragHandle : это приведет к перетаскиванию конкретный элемент c, а не то, что я хочу здесь сделать
  • cdkDragDisabled : это отключит перетаскивание всего элемента, а не то, что я хочу здесь сделать

Вот как выглядит мой код: 

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

Заранее спасибо за вашу помощь и время.

1 Ответ

0 голосов
/ 29 мая 2020

Вот простой способ обхода:

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>

Просто добавьте cdkDrag cdkDragPreviewClass="display-none" к вашим элементам ввода. Это должно вам помочь.

...