DNDTools/src/app/journal/journal-spellcards/journal-spellcards.component.html

<div cdkDropListGroup>
  <div class="example-container">
    <h2>To do</h2>

    <div
      cdkDropList
      cdkDropListOrientation="horizontal"
      [cdkDropListData]="todo"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of todo; track item) {
      <div class="example-box" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="example-container">
    <h2>Done</h2>

    <div
      cdkDropList
      cdkDropListOrientation="horizontal"
      [cdkDropListData]="done"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of done; track item) {
      <div class="example-box" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>
</div>

<!-- <div cdkDropListGroup>
  <div class="level-container">
    <h2>Zaubertrick</h2>

    <div
      cdkDropList
      [cdkDropListData]="level0"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level0; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 1</h2>

    <div
      cdkDropList
      [cdkDropListData]="level1"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level1; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 2</h2>

    <div
      cdkDropList
      [cdkDropListData]="level2"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level2; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 3</h2>

    <div
      cdkDropList
      [cdkDropListData]="level3"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level3; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 4</h2>

    <div
      cdkDropList
      [cdkDropListData]="level4"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level4; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 5</h2>

    <div
      cdkDropList
      [cdkDropListData]="level5"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level5; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 6</h2>

    <div
      cdkDropList
      [cdkDropListData]="level6"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level6; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 7</h2>

    <div
      cdkDropList
      [cdkDropListData]="level7"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level7; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 8</h2>

    <div
      cdkDropList
      [cdkDropListData]="level8"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level8; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>

  <div class="level-container">
    <h2>Level 9</h2>

    <div
      cdkDropList
      [cdkDropListData]="level9"
      class="level-table"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of level9; track item) {
      <div class="spellcard" cdkDrag>{{ item }}</div>
      }
    </div>
  </div>
</div> -->