use a drag handle with icon

pdb-js/src/app/customizable-grid/customizable-grid.component.ts

@@ -1,24 +1,111 @@
-import { Component } from '@angular/core';
-import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+import { Component, QueryList, ViewChildren } from '@angular/core';
+import {CdkDragDrop, CdkDragEnter, CdkDropList, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+
+const COLORS = [
+  '#ea4335',
+  '#4285f4',
+  '#fbbc04',
+  '#34a853',
+  '#fa7b17',
+  '#f538a0',
+  '#a142f4',
+  '#24c1e0',
+  '#9aa0a6',
+  '#5195ea',
+  '#e25142',
+  '#f5c518',
+  '#41af6a',
+  '#f6aea9',
+  '#a50e0e',
+  '#aecbfa',
+  '#174ea6',
+  '#fde293',
+  '#a8dab5',
+  '#0d652d',
+  '#fdc69c',
+  '#fba9d6',
+  '#c92786',
+  '#d7aefb',
+  '#8430ce',
+  '#a1e4f2',
+  '#007b83',
+  '#e8eaed',
+  '#b9d4f6',
+  '#f3b9b3',
+  '#fbe7a2',
+  '#b3dfc3',
+]
+
+function getColor() {
+  return COLORS[Math.floor(Math.random() * 32)];
+}
 
 @Component({
   selector: 'app-customizable-grid',
   templateUrl: './customizable-grid.component.html'
 })
 export class CustomizableGridComponent {
-  todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
-  done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
-
-  drop(event: CdkDragDrop<string[]>) {
-    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,
-      );
-    }
+  entered($event: CdkDragEnter) {
+    console.log($event.item.data, $event.container.data);
+    moveItemInArray(this.cards, $event.item.data, $event.container.data);
   }
+  entered2($event: CdkDragEnter) {
+    console.log($event.item.data, $event.container.data);
+    moveItemInArray(this.cards, $event.item.data, $event.container.data);
+  }
+
+  drop(event: CdkDragDrop<any[]>) {
+    
+  }
+
+  done(){
+
+  }
+
+  @ViewChildren(CdkDropList) dropsQuery!: QueryList<CdkDropList>;
+
+  drops!: CdkDropList[];
+
+  ngAfterViewInit() {
+    this.dropsQuery.changes.subscribe(() => {
+      this.drops = this.dropsQuery.toArray()
+    })
+    Promise.resolve().then(() => {
+      this.drops = this.dropsQuery.toArray();
+      console.log(this.drops);
+    })
+  }
+
+  /** Based on the screen size, switch from standard to one column per row */
+  cards = [
+    { title: 'Card 1', cols: 2, rows: 2, color: getColor()},
+    { title: 'Card 2', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 3', cols: 3, rows: 1, color: getColor() },
+    { title: 'Card 4', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 5', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 6', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 7', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 8', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 9', cols: 1, rows: 3, color: getColor() },
+    { title: 'Card 10', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 11', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 12', cols: 2, rows: 1, color: getColor() },
+    { title: 'Card 13', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 14', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 15', cols: 1, rows: 2, color: getColor() },
+    { title: 'Card 16', cols: 2, rows: 1, color: getColor() },
+    { title: 'Card 17', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 18', cols: 2, rows: 1, color: getColor() },
+    { title: 'Card 19', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 20', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 21', cols: 1, rows: 1, color: getColor()},
+    /* { title: 'Card 22', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 23', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 24', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 25', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 26', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 27', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 28', cols: 1, rows: 1, color: getColor() },
+    { title: 'Card 29', cols: 1, rows: 1, color: getColor() } */
+   ];
 }