Added drag-droo component in MiscModule

Author: jeroenouw

src/app/components/misc/drag-drop/drag-drop.component.html

@@ -0,0 +1,25 @@
+<div cdkDropListGroup>
+  <div class="drag-drop-container">
+    <h4>To do</h4>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="todo"
+      class="drag-drop-list"
+      (cdkDropListDropped)="drop($event)">
+      <div class="drag-drop-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+    </div>
+  </div>
+
+  <div class="drag-drop-container">
+    <h4>Done</h4>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="done"
+      class="drag-drop-list"
+      (cdkDropListDropped)="drop($event)">
+      <div class="drag-drop-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+    </div>
+  </div>
+</div>

src/app/components/misc/drag-drop/drag-drop.component.scss

@@ -0,0 +1,54 @@
+.drag-drop-container {
+  width: 400px;
+  max-width: 100%;
+  margin: 0 25px 25px 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.drag-drop-list {
+  border: solid 1px #ccc;
+  min-height: 60px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  display: block;
+}
+
+.drag-drop-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drag-drop-box:last-child {
+  border: none;
+}
+
+.drag-drop-list.cdk-drop-list-dragging .drag-drop-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/components/misc/drag-drop/drag-drop.component.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'app-drag-drop',
+  templateUrl: 'drag-drop.component.html',
+  styleUrls: ['drag-drop.component.scss'],
+})
+export class DragDropComponent {
+  public todo: string[] = [
+    'Add new features',
+    'Get 1000 stars'
+  ];
+
+  public done: string[] = [
+    'Angular',
+    'Firebase',
+    'Material desing',
+  ];
+
+  public drop(event: CdkDragDrop<string[]>): void {
+    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
+      );
+    }
+  }
+}

src/app/components/misc/misc.component.html

@@ -5,9 +5,9 @@
   <mat-card>
     <h1>Misc</h1>
     <h4>Various components ready to use in your own project.</h4>
-    
+
     <hr>
-    
+
     <!-- Miscellaneous material components -->
     <h3>Two-way data binding :</h3>
     <mat-form-field class="full-width">
@@ -18,6 +18,11 @@ <h3>Two-way data binding :</h3>
 
     <hr>
 
+    <h3>Drag & drop : </h3>
+    <app-drag-drop></app-drag-drop>
+
+    <hr>
+
     <h3>mat Datepicker : </h3>
     <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
@@ -42,7 +47,7 @@ <h3>mat Sidenav : </h3>
     </mat-sidenav-container>
 
     <hr>
-   
+
     <h3>mat Tooltip : </h3>
     <span matTooltip="This is a tooltip">Hover me!</span>
 
@@ -59,7 +64,7 @@ <h3>mat Slide toggle : </h3>
 
     <!-- Temporary disabled -->
     <!-- <app-table></app-table> -->
-    
+
     <hr>
 
     <app-expansion-panel></app-expansion-panel>
@@ -74,9 +79,9 @@ <h3>mat Slide toggle : </h3>
     <app-async-observable-pipe></app-async-observable-pipe>
 
     <hr>
-    
+
     <app-json-pipe></app-json-pipe>
-    
+
     <hr>
 
     <app-currency-pipe></app-currency-pipe>

src/app/components/misc/misc.module.ts

@@ -7,6 +7,7 @@ import { MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule
          MatIconModule, MatToolbarModule } from '@angular/material';
 
 // import { CdkTableModule } from '@angular/cdk';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PipesModule } from '@shared/pipes/pipes.module';
 
@@ -17,6 +18,7 @@ import { ChangeDetailComponent } from './change/change-detail.component';
 import { VirtRealComponent } from './virtual-reality/virtreal.component';
 import { TableComponent } from './table/table.component';
 import { StepperComponent } from './stepper/stepper.component';
+import { DragDropComponent } from './drag-drop/drag-drop.component';
 import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.component';
 
 @NgModule({
@@ -28,6 +30,7 @@ import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.compo
     VirtRealComponent,
     TableComponent,
     StepperComponent,
+    DragDropComponent,
     ExpansionPanelComponent
   ],
   imports: [
@@ -37,7 +40,8 @@ import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.compo
     MatTableModule, MatCardModule, MatDatepickerModule, MatExpansionModule,
     MatIconModule, MatToolbarModule,
     FormsModule, ReactiveFormsModule,
-    PipesModule
+    PipesModule,
+    DragDropModule
   ],
   exports: [
     CarouselComponent,