Угловой CdkDragDrop внутри ячейки таблицы и перетаскивание по строкам

Question

Я пытаюсь добавить таблицу в Angular 7, где один из столбцов содержит список, и я бы хотел, чтобы пользователь мог перетаскивать любой из этих элементов списка в разные строки.

Я пытался использовать CdkDragDrop и поместить его в таблицу, но, похоже, он не работает.

Пожалуйста, найдите код ниже:

    <table
    mat-table
    [dataSource]="general"
    style="width:100%; margin-top: 10px; margin-bottom: 50px"
    *ngIf="general.data.length !== 0">
    <ng-container matColumnDef="Camera_Physical_Index">
      <th mat-header-cell *matHeaderCellDef>Camera Physical Index</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Camera_Physical_Index }}
      </td>
    </ng-container>

    <ng-container matColumnDef="Analytical_Function">
      <th mat-header-cell *matHeaderCellDef>Analytical Function</th>
      <td mat-cell *matCellDef="let element">
        <div
          cdkDropList
          [cdkDropListData]="general.data"
          (cdkDropListDropped)="dropGroup($event)"
        >
          <div
            cdkDropListGroup
            class="example-container"
            cdkDrag
            [cdkDragData]="element"
          >
            <div
              cdkDropList
              class="example-list"
              id="{{ element.Camera_Physical_Index }}"
              [cdkDropListData]="element.Analytical_Function"
              (cdkDropListDropped)="dropItem($event)"
              [cdkDropListConnectedTo]="getConnectedList()"
            >
              <div
                class="example-box"
                *ngFor="let item of element.Analytical_Function"
                cdkDrag
                [cdkDragData]="item"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="generalColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: generalColumns"></tr>
  </table>

Желаемый результат выглядит следующим образом:

желаемый интерфейс

Answer 1

Чтобы связать списки, вы должны поместить cdkDropListGroup в ng-контейнер столбца, чтобы он включал все списки (список каждой строки) этого столбца.

Пожалуйста, найдитениже стэклайт, где я попытался сделать пример как ваш:

https://stackblitz.com/edit/angular-xzbupf

В общем: если у вас есть несколько списков, и вы хотите перетащить из одного в другой:

1. вы должны соединить все эти списки с помощью директивы cdkDropListGroup в глобальном, так что она будет группировать и соединять их автоматически.
2. add cdkDropList вокруг каждого перетаскиваемого объектаitem
3. добавление cdkDrag к элементам, чтобы сделать их перетаскиваемыми
4. добавление cdkDropListDropped события для прослушивания, чтобы обновить модель данных после обновленияпользователь заканчивает перетаскивание.

угловой материал