working drag&drop

package.json

@@ -25,13 +25,14 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^7.2.7",
-        "@angular/cdk": "^7.2.7",
+        "@angular/animations": "^7.2.16",
+        "@angular/cdk": "^7.3.7",
         "@angular/common": "^7.2.7",
         "@angular/compiler": "^7.2.7",
         "@angular/core": "^7.2.7",
         "@angular/forms": "^7.2.7",
         "@angular/http": "^7.2.7",
+        "@angular/material": "^16.2.1",
         "@angular/platform-browser": "^7.2.7",
         "@angular/platform-browser-dynamic": "^7.2.7",
         "@angular/pwa": "^0.12.4",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpModule } from "@angular/http";
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
+import { DragDropModule } from '@angular/cdk/drag-drop';
 // import { NgxElectronModule } from 'ngx-electron';
 
 import { NgxsModule } from '@ngxs/store';
@@ -177,6 +178,7 @@ const routes: Routes = [
         OwlDateTimeModule,
         OwlNativeDateTimeModule,
         OverlayModule,
+        DragDropModule,
         // NgxElectronModule,
         RouterModule.forRoot(routes),
 

src/app/components/left-side-bar/left-side-bar.component.html

@@ -14,21 +14,29 @@
         </app-account-icon>
     </div>
 
+    <div cdkDropList
+        [cdkDropListData]="accounts"        
+        (cdkDropListDropped)="onDrop($event)">
+        <div *ngFor="let account of accounts" cdkDrag class="draggable">
+            <img class="draggable__avatar" src="{{ account.avatar }}" />
+        </div>
+    </div>
+
+
     <a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }"
         href title="add new account" (click)="addNewAccount()" (contextmenu)="addNewAccount()">
         <fa-icon [icon]="faPlus"></fa-icon>
     </a>
 
 
-    <a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href title="scheduled statuses" 
-        *ngIf="hasAccounts && hasScheduledStatuses"
-        (click)="openScheduledStatuses()"
+    <a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href
+        title="scheduled statuses" *ngIf="hasAccounts && hasScheduledStatuses" (click)="openScheduledStatuses()"
         (contextmenu)="openScheduledStatuses()">
         <fa-icon [icon]="faCalendarAlt"></fa-icon>
     </a>
 
-    <a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings" (click)="openSettings()"
-        (contextmenu)="openSettings()">
+    <a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings"
+        (click)="openSettings()" (contextmenu)="openSettings()">
         <fa-icon [icon]="faCog"></fa-icon>
     </a>
 </div>

src/app/components/left-side-bar/left-side-bar.component.scss

@@ -82,4 +82,15 @@ $height-button: 40px;
 .no-accounts {
     padding-top: 10px;
     // color: cornflowerblue;   
+}
+
+.draggable {
+    width: 40px;
+    height: 40px;
+    margin: auto;
+    margin-bottom: 5px;
+
+    &__avatar {
+        width: calc(100%);
+    }
 }

src/app/components/left-side-bar/left-side-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
+import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
 import { Subscription, Observable } from "rxjs";
 import { Store } from "@ngxs/store";
 import { faPlus, faCog, faSearch } from "@fortawesome/free-solid-svg-icons";
@@ -166,6 +167,18 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
         this.scheduledSub.unsubscribe();
     }
 
+    onDrop(event: CdkDragDrop<AccountWithNotificationWrapper[]>) {
+        console.warn(event);
+
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data,
+                event.previousIndex,
+                event.currentIndex);
+
+            console.warn(this.accounts);
+        }
+    }
+
     onToogleAccountNotify(acc: AccountWrapper) {
         this.store.dispatch([new SelectAccount(acc.info)]);
     }