feat(demo-app): added a drag handle in the real-life-example table

Author: llorenspujol

projects/demo-app/src/app/real-life-example/real-life-example.component.html

@@ -112,6 +112,7 @@
             </div>
         </ktd-grid-item>
         <ktd-grid-item class="ktd-grid-item-table" id="4">
+            <div ktdGridDragHandle class="table-drag-handle">Drag here</div>
             <ktd-table-sorting></ktd-table-sorting>
             <ng-template ktdGridItemPlaceholder>
                 <div class="custom-placeholder-container ktd-grid-item-table">

projects/demo-app/src/app/real-life-example/real-life-example.component.scss

@@ -36,6 +36,29 @@
         }
     }
 
+    ktd-grid-item {
+        .table-drag-handle {
+            position: absolute;
+            padding: 2px;
+            top: 0;
+            left: 16px;
+            right: 16px;
+            border: 1px solid #484747;
+            border-radius: 2px;
+            color: #eaeaea;
+            background-color: #888888;
+            cursor: grab;
+        }
+
+        &.ktd-grid-item-dragging {
+            .table-drag-handle {
+                cursor: grabbing;
+            }
+        }
+    }
+
+
+
     .ktd-grid-img-container {
         width: 100%;
         height: 100%;

projects/demo-app/src/app/real-life-example/real-life-example.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { KtdGridComponent, KtdGridItemResizeEvent, KtdGridLayout, ktdTrackById, KtdGridItemComponent, KtdGridItemPlaceholder } from '@katoid/angular-grid-layout';
+import {
+    KtdGridComponent, KtdGridItemResizeEvent, KtdGridLayout, ktdTrackById, KtdGridItemComponent, KtdGridItemPlaceholder, KtdGridDragHandle
+} from '@katoid/angular-grid-layout';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { countriesPopulation, countriesPopulationByYear } from './data/countries-population.data';
@@ -13,7 +15,7 @@ import { KtdTableSortingComponent } from './table-sorting/table-sorting.componen
     selector: 'ktd-real-life-example',
     templateUrl: './real-life-example.component.html',
     styleUrls: ['./real-life-example.component.scss'],
-    imports: [KtdGridComponent, KtdGridItemComponent, BarChartModule, KtdGridItemPlaceholder, TreeMapModule, KtdTableSortingComponent, PieChartModule, KtdFooterComponent]
+    imports: [KtdGridComponent, KtdGridItemComponent, BarChartModule, KtdGridItemPlaceholder, KtdGridDragHandle, TreeMapModule, KtdTableSortingComponent, PieChartModule, KtdFooterComponent]
 })
 export class KtdRealLifeExampleComponent implements OnInit, OnDestroy {
     @ViewChild(KtdGridComponent, {static: true}) grid: KtdGridComponent;

projects/demo-app/src/app/real-life-example/table-sorting/table-sorting.component.scss

@@ -3,7 +3,6 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    touch-action: none; // This is needed to make drag and drop on touch devices possible without interfering with the inner scroll.
 }
 
 table {