代码之家 › 专栏 › 技术社区 › Sensei James

是否可以将cdkdrag放入mat select?

angular-cdk angular7 angular-material

Sensei James · 技术社区 · 6 年前

我有一个简单的 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>

在排字脚本中, foods 是:

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

可以用吗 cdkDrag 在mat select元素中?我正在努力实现这样的目标:

<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 回复 | 直到 6 年前

Sensei James 6 年前

对!这是可能的:

<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 在A里面 cdkDropList div ,以便Drop事件( cdkDropListDropped )会可靠地开火。 Working StackBlitz .