- Sortieren klappt in allen Orientierungen - Optionales Highlighting

projects/common/components/input-elements/drop-list.component.ts

 import {
-  Component, Input, OnInit, Pipe, PipeTransform
-} from '@angular/core';
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+  Component, Input } from '@angular/core';
+import {
+  CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem
+} from '@angular/cdk/drag-drop';
 import { DropListElement } from 'common/models/elements/input-elements/drop-list';
-import { DragNDropValueObject } from 'common/models/elements/element';
 import { FormElementComponent } from '../../directives/form-element-component.directive';
 
 @Component({
   selector: 'aspect-drop-list',
   template: `
-<!--         [fxLayout]="elementModel.orientation | droplistLayout"-->
-<!--         [fxLayoutAlign]="elementModel.orientation |  droplistLayoutAlign"-->
-<!--         [class.vertical-orientation]="elementModel.orientation === 'vertical'"-->
-<!--         [class.horizontal-orientation]="elementModel.orientation === 'horizontal'"-->
-<!--         [class.only-one-item]="elementModel.onlyOneItem"-->
-<!--         [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"-->
-<!--         [style.border-color]="elementModel.highlightReceivingDropListColor"-->
-<!--         tabindex="0"-->
-
+    <!--         [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"-->
+    <!--         tabindex="0"-->
     <div class="list" [id]="elementModel.id"
          [class.cloze-context]="clozeContext"
          [class.vertical-orientation]="elementModel.orientation === 'vertical'"
          [class.horizontal-orientation]="elementModel.orientation === 'horizontal'"
          [class.floating-orientation]="elementModel.orientation === 'flex'"
+         [class.highlight-receiver]="classReference.highlightReceivingDropList"
          cdkDropList
          [cdkDropListData]="this" [cdkDropListConnectedTo]="elementModel.connectedTo"
+         [cdkDropListOrientation]="elementModel.orientation === 'vertical' ? 'vertical' : 'horizontal'"
          [cdkDropListEnterPredicate]="onlyOneItemPredicate"
          (cdkDropListDropped)="drop($event)"
          [style.color]="elementModel.styling.fontColor"
@@ -34,17 +29,20 @@ import { FormElementComponent } from '../../directives/form-element-component.di
          [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
          [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
          [style.backgroundColor]="elementModel.styling.backgroundColor"
+         [style.border-color]="elementModel.highlightReceivingDropListColor"
          [class.errors]="elementFormControl.errors && elementFormControl.touched"
          (focusout)="elementFormControl.markAsTouched()">
       <ng-container *ngFor="let dropListValueElement of elementModel.value let index = index;">
-<!--             fxLayout="row"-->
-<!--             [fxLayoutAlign]="elementModel.onlyOneItem ? (clozeContext ? 'center center' : 'start center') : 'none'"-->
         <div *ngIf="!dropListValueElement.imgSrc"
-             class="list-item" cdkDrag
+             class="list-item"
+             cdkDrag
+             (cdkDragStarted)="setHighlighting(elementModel.highlightReceivingDropList)"
+             (cdkDragEnded)="setHighlighting(false)"
              [style.background-color]="elementModel.styling.itemBackgroundColor">
           <span>{{dropListValueElement.text}}</span>
-          <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-          <ng-template cdkDragPreview [matchSize]="true">
+          <div *cdkDragPlaceholder></div>
+          <!--          <ng-template cdkDragPreview [matchSize]="true">-->
+          <ng-template cdkDragPreview>
             <div [style.color]="elementModel.styling.fontColor"
                  [style.font-family]="elementModel.styling.font"
                  [style.font-size.px]="elementModel.styling.fontSize"
@@ -69,12 +67,11 @@ import { FormElementComponent } from '../../directives/form-element-component.di
   `,
   styles: [
     '.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); border-radius: 5px;}',
-    // '.list {padding: 2px; display: flex; gap: 5px;}',
     '.list {display: flex; gap: 5px; box-sizing: border-box; padding: 5px}',
     '.list.vertical-orientation {flex-direction: column;}',
     '.list.horizontal-orientation {flex-direction: row;}',
     '.list.floating-orientation {place-content: center space-around; align-items: center; flex-flow: row wrap;}',
-    // '.cloze-context.list {place-content: stretch; align-items: stretch;}',
+    '.cloze-context.list {padding: 0}',
     '.list-item {border-radius: 5px;}',
     // '.list-item {margin: 2px; border-radius: 5px;}',
     ':not(.cloze-context) .list-item {padding: 10px;}',
@@ -82,7 +79,6 @@ import { FormElementComponent } from '../../directives/form-element-component.di
     // '.cloze-context .list {padding: 0 5px;}',
     // '.cloze-context .list-item {padding: 0 5px; line-height: 1.2;}',
     // '.only-one-item.cloze-context .list-item {padding: 0;}',
-    // '.only-one-item.cloze-context .list-item {padding: 0;}',
     // '.only-one-item:not(.cloze-context) .list-item {padding: 0 10px;}',
     // '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%; line-height: 1.2;}',
     // 'img.list-item {align-self: start; padding: 2px !important;}',
@@ -95,18 +91,20 @@ import { FormElementComponent } from '../../directives/form-element-component.di
     // '.list-item {cursor: grab;}',
     // '.list-item:active {cursor: grabbing;}',
 
-    '.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black;}',
+    '.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black; padding: 10px;}',
 
     '.cdk-drop-list-dragging .cdk-drag {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
-    '.cdk-drop-list-receiving {background-color: cadetblue !important;}',
-    // '.cdk-drop-list-receiving {border: 2px solid;}',
-    // '.cdk-drop-list-receiving .list-item {margin: 0;}'
-    '.example-custom-placeholder {background: #ccc; border: dotted 3px #999; min-height: 20px;}'
+    '.highlight-receiver.cdk-drop-list-receiving {padding: 3px; border: 2px solid;}',
+    '.cdk-drag-placeholder {background: #ccc; border: dotted 3px #999; min-height: 20px;}',
+    '.cdk-drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}'
   ]
 })
 export class DropListComponent extends FormElementComponent {
   @Input() elementModel!: DropListElement;
   @Input() clozeContext: boolean = false;
+
+  classReference = DropListComponent;
+  static highlightReceivingDropList = false;
   // viewModel: DragNDropValueObject[] = [];
 
   // ngOnInit() {
@@ -137,4 +135,9 @@ export class DropListComponent extends FormElementComponent {
   onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
     !drop.data.elementModel.onlyOneItem || drop.data.elementModel.value.length < 1
   );
+
+  setHighlighting(showHighlight: boolean) {
+    console.log('drag started', showHighlight);
+    DropListComponent.highlightReceivingDropList = showHighlight;
+  }
 }

projects/common/models/elements/input-elements/drop-list.ts

@@ -11,7 +11,7 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
 export class DropListElement extends InputElement {
   value: DragNDropValueObject[];
   onlyOneItem: boolean = false;
-  isSortList: boolean = false;
+  // isSortList: boolean = false;
   connectedTo: string[] = [];
   copyOnDrop: boolean = false;
   deleteDroppedItemWithSameID: boolean = false;
@@ -29,7 +29,7 @@ export class DropListElement extends InputElement {
       element.value.map(val => ({ ...val })) :
       [];
     if (element.onlyOneItem) this.onlyOneItem = element.onlyOneItem;
-    if (element.isSortList !== undefined) this.isSortList = element.isSortList;
+    // if (element.isSortList !== undefined) this.isSortList = element.isSortList;
     if (element.connectedTo) this.connectedTo = [...element.connectedTo];
     if (element.copyOnDrop !== undefined) this.copyOnDrop = element.copyOnDrop;
     if (element.deleteDroppedItemWithSameID !== undefined) {