use dragDropped as this will always fire

frontend/src/app/modules/grids/grid/drag-and-drop.service.ts

@@ -81,6 +81,7 @@ export class GridDragAndDropService implements OnDestroy {
   public abort() {
     document.dispatchEvent(new Event('mouseup'));
     this.aborted = true;
+    this.layout.resetAreas();
   }
 
   public stop() {
@@ -92,15 +93,14 @@ export class GridDragAndDropService implements OnDestroy {
     this.placeholderArea = null;
   }
 
-  public drop(event:CdkDragDrop<GridArea>) {
+  public drop(draggedArea:GridWidgetArea, event:CdkDragDrop<GridArea>) {
     if (this.aborted) {
       this.aborted = false;
       return;
     }
 
     // this.draggedArea is already reset to null at this point
-    let dropArea = event.container.data;
-    let draggedArea = event.previousContainer.data as GridWidgetArea;
+    let dropArea = this.layout.mousedOverArea!;
 
     // Set the draggedArea's startRow/startColumn properties
     // to the drop zone ones.

frontend/src/app/modules/grids/grid/grid.component.html

@@ -19,6 +19,7 @@
     <div class="grid--area-content widget-box"
          cdkDrag
          (cdkDragStarted)="drag.start(area)"
+         (cdkDragDropped)="drag.drop(area, $event)"
          (cdkDragEnded)="drag.stop()">
 
       <span *ngIf="drag.isDraggable"
@@ -61,7 +62,6 @@
        [id]="area.guid"
        (mouseover)="layout.setMousedOverArea(area)"
        [cdkDropListData]="area"
-       (cdkDropListDropped)="drag.drop($event)"
        [cdkDropListConnectedTo]="layout.gridAreaIds">
     <div class="grid--widget-add hidden-for-mobile"
          [title]="add.addText"