add: drag and drop over many subtitles

diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index e38ebf329ace6186ab1d6133c2600ea571a012af..5a84a239edbeaf9abe3f813315d50f2ce97e8ed8 100644 (file)
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -1,4 +1,8 @@
-<div class="subtitle" [class.active]="formSubtitleVisible">
+<div cdkDropList
+     [cdkDropListData]="subtitle.Foods"
+     (cdkDropListDropped)="reorderList($event)"
+       class="subtitle"
+       [class.active]="formSubtitleVisible">
        <h2>{{subtitle.Subtitle}}</h2>
        <button class="button"
                type="button"
@@ -21,15 +25,13 @@
                        (click)="saveSubtitle()">Speichern</button>
        </form>
 
-       <div cdkDropList (cdkDropListDropped)="reorderList($event)">
-               <div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
-                       <app-food [food]="food"></app-food>
-                       <button class="button"
-                               type="button"
-                               (click)="insertNewFood(i)">Einfügen</button>
-                       <button class="button"
-                               type="button"
-                               (click)="removeFood(i)">Löschen</button>
-               </div>
+       <div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
+               <app-food [food]="food"></app-food>
+               <button class="button"
+                       type="button"
+                       (click)="insertNewFood(i)">Einfügen</button>
+               <button class="button"
+                       type="button"
+                       (click)="removeFood(i)">Löschen</button>
        </div>
 </div>

diff --git a/src/app/subtitle/subtitle.component.ts b/src/app/subtitle/subtitle.component.ts
index e6570b76194acdfd90eab6de709c25ff1a80fb98..6a528db9e61bb9ce2cd193d92d970aa86ffb0c4f 100644 (file)
--- a/src/app/subtitle/subtitle.component.ts
+++ b/src/app/subtitle/subtitle.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDragDrop,
+       moveItemInArray,
+       transferArrayItem } from '@angular/cdk/drag-drop';
 import { ISubtitle } from '../isubtitle';
 import { IFood } from '../ifood';
 
@@ -57,8 +59,15 @@ export class SubtitleComponent implements OnInit
 
        public reorderList(event: CdkDragDrop<IFood[]>)
        {
-               moveItemInArray(this.subtitle.Foods,
-                       event.previousIndex,
-                       event.currentIndex);
+               if (event.previousContainer === event.container) {
+                       moveItemInArray(event.container.data,
+                               event.previousIndex,
+                               event.currentIndex);
+               } else {
+                       transferArrayItem(event.previousContainer.data,
+                               event.container.data,
+                               event.previousIndex,
+                               event.currentIndex);
+               }
        }
 }

diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
index 4b8c3c839e045b2bc78f80cd70cbada6442994ab..e510ea815aa5eeefb9bbac51668a403a9bb831f2 100644 (file)
--- a/src/app/title/title.component.html
+++ b/src/app/title/title.component.html
@@ -1,4 +1,4 @@
-<div class="title" [class.active]="formTitleVisible">
+<div cdkDropListGroup class="title" [class.active]="formTitleVisible">
        <h1>{{title.Title}}</h1>
        <button class="button"
                type="button"