optimize drag'n'drop

src/app/modules/shows/show/song/song.component.html

@@ -8,6 +8,14 @@
     }
     @if (!show.published && !fullscreen) {
       <div class="song">
+        @if (dragHandle && !edit) {
+          <button
+            aria-label="Lied verschieben"
+            cdkDragHandle
+            class="drag-handle"
+            type="button"
+          ></button>
+        }
         <span class="title">{{ iSong.title }}</span>
         @if (!edit) {
           <div class="keys-container">
@@ -30,7 +38,9 @@
       </div>
       @if (!edit) {
         <div aria-hidden="true" class="song select">
-          <span></span>
+          @if (dragHandle) {
+            <span class="drag-handle-placeholder"></span>
+          }
           <span>            <mat-form-field class="keys-select">
               <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
                 @for (key of keys; track key) {

src/app/modules/shows/show/song/song.component.less

@@ -5,11 +5,11 @@
   }
 
   display: grid;
-  grid-template-columns: auto 70px 25px 25px;
+  grid-template-columns: 24px auto 70px 25px 25px;
   @media screen and (max-width: 860px) {
-    grid-template-columns: auto 70px 45px 45px;
+    grid-template-columns: 24px auto 70px 45px 45px;
   }
-  grid-template-areas: "title keys edit delete";
+  grid-template-areas: "drag title keys edit delete";
 
   & > * {
     display: flex;
@@ -19,6 +19,51 @@
   overflow: hidden;
 }
 
+.drag-handle,
+.drag-handle-placeholder {
+  grid-area: drag;
+}
+
+.drag-handle {
+  width: 16px;
+  height: 36px;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  cursor: grab;
+  justify-self: start;
+  position: relative;
+
+  &::before {
+    content: "";
+    width: 10px;
+    height: 18px;
+    display: block;
+    border-radius: 999px;
+    background-image: radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px),
+    radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px);
+    background-position: 0 0, 6px 0;
+    background-size: 6px 6px;
+    background-repeat: repeat-y;
+    opacity: 0.65;
+    transition: var(--transition);
+  }
+
+  &:hover::before {
+    opacity: 1;
+    background-image: radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px),
+    radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.drag-handle-placeholder {
+  width: 16px;
+}
+
 .keys-container {
   display: flex;
   flex-direction: column;
@@ -59,6 +104,7 @@
 
 .title {
   grid-area: title;
+  min-width: 0;
 
   &.published {
     margin: 10px 0;

src/app/modules/shows/show/song/song.component.ts

@@ -17,6 +17,7 @@ import {MatInput} from '@angular/material/input';
 import {CdkTextareaAutosize} from '@angular/cdk/text-field';
 import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
+import {CdkDragHandle} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-song',
@@ -36,6 +37,7 @@ import {ButtonComponent} from '../../../../widget-modules/components/button/butt
     ButtonRowComponent,
     ButtonComponent,
     SongTextComponent,
+    CdkDragHandle,
   ],
 })
 export class SongComponent implements OnInit {
@@ -44,6 +46,7 @@ export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
   @Input() public showId: string | null = null;
   @Input() public showText: boolean | null = null;
+  @Input() public dragHandle = false;
   @Input() public index = -1;
   @Input() public fullscreen = false;
   public keys: string[] = [];