是否可以将 cdkDrag 放入 mat-select 中？答案

【问题标题】：Is it possible to put a cdkDrag inside a mat-select?是否可以将 cdkDrag 放入 mat-select 中？
【发布时间】：2021-02-09 17:58:36
【问题描述】：

我有一个简单的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'}
  ];

是否可以在 mat-select 元素中使用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>

但我无法拖动下拉项目。请帮忙！

【问题讨论】：

标签： angular angular-material angular7 angular-cdk

【解决方案1】：

是的！有可能：

<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-options 包裹在cdkDropList div 中，这样drop 事件(cdkDropListDropped) 就会可靠地触发。 Working StackBlitz.

【讨论】：