Question

我有这个例子：https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html

一切正常，但是同时拖动将选择框“重置”为列表中的第一个值。

有什么办法可以解决这个问题？它只是视觉上的，但对用户来说却很刺耳。我曾尝试使用cdkDragPreview选项，但无法使其正常工作。

组件：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      title: ['title'],
      items: fb.array([
        fb.group({
          name: fb.control('1'),
          note: fb.control('quux')
        }),
        fb.group({
          name: fb.control('2'),
          note: fb.control('bar')
        }),
        fb.group({
          name: fb.control('3'),
          note: fb.control('baz')
        })

      ])
    })
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
    moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
  }

}

模板：

<form [formGroup]="myForm">
  <input formControlName="title" />
  <div cdkDropList id="foo" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag>
      <span cdkDragHandle>drag</span>
      <div [formGroup]="item">
        <input type="text" formControlName="name">
        <select formControlName="note">
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>quux</option>
        </select>
      </div>
    </div>
  </div>
  {{ myForm.value | json }}
</form>

Answer 1

我修改了@Amir Fawzy的答案，在获取当前活动笔记时添加了一个变量，该变量在拖动所选框时显示。

TS：

activeNote: string;
enter(i) {
  this.activeNote = this.myForm.get('items')['controls'][i].get('note').value;
}

HTML：

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag #elem="cdkDrag" (mouseenter)="enter(i)">
    <span cdkDragHandle>drag</span>
    <div [formGroup]="item">
      <input type="text" formControlName="name">
      <select formControlName="note">
        <option [hidden]="elem.moved">{{activeNote}}</option>
        <option>foo</option>
        <option>bar</option>
        <option>baz</option>
        <option>quux</option>
      </select>
    </div>
  </div>
</div>

Here's a duplicate on Stackblitz ..

Answer 2

您的代码很好，但没有问题，但如果这样调用，则由drag-drop cdk引起，因为这是我所知道的默认行为，但是您可以变通增强该行为，以使其看起来不错用户。

尝试

<div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag #elem="cdkDrag">
  <span cdkDragHandle>drag</span>
  <div [formGroup]="item">
    <input type="text" formControlName="name">
    <select formControlName="note">
      <option [hidden]="elem.moved">dragging...</option>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
      <option>quux</option>
     </select>
  </div>
</div>

在#elem="cdkDrag"中添加到元素local reference中的事情发生了什么
和<option [hidden]="elem.moved">dragging...</option>在这里发生的事情是当用户拖动元素dragging select option时在select input中显示，当用户结束拖动时，它将再次隐藏，并且选择输入值将再次设置一些CSS，看起来会很好。

Answer 3

Angular Material的mat-select似乎工作正常，请参见https://ngfelixl.github.io/ng-libraries

具有（反应性）形式的角CDK拖放

3 个答案: