Перетаскивание целых таблиц с разными значениями

Question

Привет, я пытаюсь сделать перетаскивание, чтобы настроить свой собственный макет, так сказать. Это мой html прямо сейчас. HTML:

<div class="d-flex flex-wrap flex-row justify-content-center">
    <div class="p-2">
      <i class="fa fa-filter" data-toggle="collapse" href="#filter"></i>
      <form class="collapse" id="filter">
        <div class="form-group">
          <label for="exampleFormControlSelect1">Name</label>
          <input type="name" class="form-control" id="name" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="exampleFormControlSelect1">Type</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        <div class="form-group">
          <label for="exampleFormControlSelect1">Group</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        <div class="form-group">
          <label for="exampleFormControlSelect1">Specialty</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </form>
      <div id="table-scroll" class="table-scroll">
        <table class="table table-striped table-bordered row-border hover table-dark">
          <thead class="thead-dark">
            <tr>
              <th *ngFor="let head of headers" scope="col" sortable>
                {{head}}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let diagnosis of diagnosises; let i = index">
              <td>
                <p>
                  {{diagnosis.id}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosis.name}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosis.group}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosis.type}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosis.specialty}}
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="p-2">
      <i class="fa fa-flag" data-toggle="collapse" href="#flag" style="padding-right: 10px;"></i>
      <i class="fa fa-history" data-toggle="collapse" href="#history"></i>
      <div class="table-scroll collapse" id="flag">
        <table class="table table-striped table-bordered row-border hover table-dark">
          <thead class="thead-dark">
            <tr>
              <th>
                Complaints
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                Pijn in de buik
              </td>
            </tr>
            <tr>
              <td>
                Geen gevoel in knie
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="table-scroll collapse" id="history">
        <table class="table table-striped table-bordered row-border hover table-dark">
          <thead class="thead-dark">
            <tr>
              <th *ngFor="let head of previousHeaders" scope="col" sortable>
                {{head}}
              </th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
      <div id="table-scroll" class="table-scroll">
        <table class="table table-striped table-bordered row-border hover table-dark">
          <thead class="thead-dark">
            <tr>
              <th *ngFor="let head of lineHeaders" scope="col" sortable>
                {{head}}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let diagnosisLine of diagnosisLines; let i = index">
              <td>
                <p>
                  {{diagnosisLine.id}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosisLine.name}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosisLine.location}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosisLine.probability}}
                </p>
              </td>
              <td>
                <p>
                  {{diagnosisLine.remarks}}
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

Вот как это выглядит сейчас: https://i.stack.imgur.com/rgqGf.png

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

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

<div style="display: flex;">
    <div cdkDropList 
    [cdkDropListData]="numbers"
    (cdkDropListDropped)="drop($event)" 
    [cdkDropListConnectedTo]="left"
    #right="cdkDropList"
    style="width: 50%; border: 1px solid red;">
      <div cdkDrag class="item">
        {{numbers[1]}} HELLO
      </div>
    </div>
    <div cdkDropList 
    [cdkDropListData]="otherNumbers"
    (cdkDropListDropped)="drop($event)" 
    [cdkDropListConnectedTo]="right"
    #left="cdkDropList"
    style="width: 50%; border: 1px solid red;">
      <div cdkDrag *ngFor="let number of otherNumbers" class="item">
        {{number}}
      </div>
    </div>
  </div>

drop(event: CdkDragDrop<number[]>) {
    if (event.previousContainer !== event.container) {
      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex)
    } else {
      moveItemInArray(this.numbers, event.previousIndex, event.currentIndex);
    }
  }