Можно ли поместить cdkDrag в коврик? - PullRequest
Новая
       13

Можно ли поместить cdkDrag в коврик?

0 голосов
/ 11 января 2019

У меня есть простой mat-select элемент: 

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

где в TypeScript foods равно: 

  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

Возможно ли использовать cdkDrag внутри элемента выбора мата? Я пытаюсь добиться чего-то вроде этого: 

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <div cdkDropList>
      <div *ngFor="let food of foods">
        <span cdkDragHandle>$$$</span>
        <mat-option [value]="food.value" cdkDrag>
          {{food.viewValue}}
        </mat-option>
      </div>
     </div>
  </mat-select>
</mat-form-field>

но у меня проблемы с перетаскиванием выпадающих элементов. Пожалуйста, помогите!

1 Ответ

0 голосов
/ 14 января 2019

Да! Возможно: 

<mat-form-field>
  <mat-select placeholder="Favorite food" multiple>
    <div cdkDropList (cdkDropListDropped)="drop($event)">
      <mat-option *ngFor="let food of foods" [value]="food.value" cdkDrag>
        {{food.viewValue}}
        <span cdkDragHandle>$$$</span>
      </mat-option>
      </div>
  </mat-select>
</mat-form-field>

Похоже, хитрость заключается в том, чтобы обернуть ваши mat-option s в cdkDropList div, чтобы событие сброса (cdkDropListDropped) сработало надежно. Рабочий StackBlitz .

...