Add handling for drop on the whole area. In that case append the new dimension at the end.

Author: MKirova

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -14,7 +14,12 @@
         (pointerdown)="$event.preventDefault()">
 
         <!-- Columns area -->
-        <igx-chips-area #colArea>
+        <igx-chips-area #colArea
+        (dropped)="onDimDrop($event, colArea, 1)"
+        igxDrop
+        (igxDragEnter)="onAreaDragEnter($event, colArea)"
+        (igxDragLeave)="onAreaDragLeave($event, colArea)"
+        >
             <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName"
              [removable]="true" (remove)="columnRemoved($event)"
              (dragEnter)="onDimDragEnter($event)"
@@ -46,7 +51,12 @@
             <div #pivotContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths" 
                 (pointerdown)="$event.preventDefault()" style='display: flex; align-items: flex-end;'>
                  <!-- Row area -->
-                 <igx-chips-area #rowArea>
+                 <igx-chips-area #rowArea 
+                 (dropped)="onDimDrop($event, rowArea, 0)"
+                 igxDrop
+                 (igxDragEnter)="onAreaDragEnter($event, rowArea)"
+                 (igxDragLeave)="onAreaDragLeave($event, rowArea)"
+                 >
                     <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName"
                      [removable]="true" (remove)="rowRemoved($event)"
                      (dragEnter)="onDimDragEnter($event)"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -67,34 +67,55 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         event.owner.nativeElement.style.borderLeft = '';
     }
 
+    public onAreaDragEnter(event, area) {
+        const dragId = event.detail.owner.element.nativeElement.parentElement.id;
+        const isValue = this.grid.pivotConfiguration.values.find(x => x.member === dragId);
+        if (isValue) {
+            // cannot drag value in dimensions
+            return;
+        }
+        const lastElem = area.chipsList.last.nativeElement;
+        const targetElem = event.detail.originalEvent.target;
+        const targetOwner = event.detail.owner.element.nativeElement.parentElement;
+        if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
+            area.chipsList.last.nativeElement.style.borderRight = '1px solid red';
+        }
+    }
+    public onAreaDragLeave(event, area) {
+        area.chipsList.toArray().forEach(element => {
+            element.nativeElement.style.borderRight = '';
+        });
+    }
+
     public onDimDrop(event, area, dimension: PivotDimensionType) {
+        const dragId = event.dragChip?.id || event.dragData?.chip.id;
         const currentDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.rows :
         this.grid.pivotConfiguration.columns;
         const chipsArray = area.chipsList.toArray();
-        const chip = chipsArray.find(x => x.id === event.dragChip.id);
+        const chip = chipsArray.find(x => x.id === dragId);
         const isNewChip = chip === undefined;
-        const currIndex = area.chipsList.toArray().indexOf(event.owner);
+        const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
         if (isNewChip) {
             // chip moved from external collection
             const oppositeDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.columns :
             this.grid.pivotConfiguration.rows;
-            const dim = oppositeDim.find(x => x.fieldName === event.dragChip.id);
-            if(!dim) {
+            const dim = oppositeDim.find(x => x.fieldName === dragId);
+            if (!dim) {
                 // you have dragged something that is not a dimension
                 return;
             }
             dim.enabled = false;
 
             const newDim = Object.assign({}, dim);
             newDim.enabled = true;
-            currentDim.splice(currIndex, 0, newDim);
+            currentDim.splice(chipIndex, 0, newDim);
             this.grid.setupColumns();
         } else {
             // chip from same collection, reordered.
-            const newDim = currentDim.find(x => x.fieldName === event.dragChip.id);
-            const dragChipIndex = chipsArray.indexOf(event.dragChip);
+            const newDim = currentDim.find(x => x.fieldName === dragId);
+            const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
             currentDim.splice(dragChipIndex, 1);
-            currentDim.splice(currIndex, 0, newDim);
+            currentDim.splice(dragChipIndex > chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
         }
         this.grid.pipeTrigger++;
     }