diff --git a/src/app/drag-drop/drag-drop.sample.scss b/src/app/drag-drop/drag-drop.sample.scss
index dd57535adea..42d69b74dfb 100644
--- a/src/app/drag-drop/drag-drop.sample.scss
+++ b/src/app/drag-drop/drag-drop.sample.scss
@@ -164,3 +164,37 @@
box-shadow: 0 2px 6px 0 gray;
background-color: rgba(232, 232, 232, .5);
}
+
+.white {
+ background-color: white;
+}
+
+.lightblue {
+ background-color: lightblue;
+}
+
+.rowsContainer {
+ margin: 1em;
+ height: 100px;
+ width: 50%;
+ border: 1px solid gray;
+}
+
+.scrollContainer{
+ overflow: auto;
+}
+
+.dragGhost {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: rem(180px);
+ color: black;
+ background-color: yellow;
+ /*border-color: gray;*/
+ border: 1px solid gray;
+ font-size: rem(13px);
+ padding: rem(8px);
+ border-radius: rem(4px);
+}
diff --git a/src/app/drag-drop/drag-drop.sample.ts b/src/app/drag-drop/drag-drop.sample.ts
index b760bfbcc68..485774abec7 100644
--- a/src/app/drag-drop/drag-drop.sample.ts
+++ b/src/app/drag-drop/drag-drop.sample.ts
@@ -2,14 +2,20 @@ import { ChangeDetectorRef, Component, ViewChild, ElementRef, ViewChildren, Quer
import { NgIf, NgClass, NgFor, NgStyle } from '@angular/common';
import { ShadowGridSampleComponent } from './shadow-dom-grid/shadow-grid-sample';
-import { DragDirection, GlobalPositionStrategy, IDragBaseEventArgs, IDropDroppedEventArgs, IgxButtonDirective, IgxDragDirective, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxInsertDropStrategy, IgxLabelDirective, IgxPrefixDirective, IgxRippleDirective, IgxToggleDirective, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular';
+import { DragDirection, GlobalPositionStrategy, IDragBaseEventArgs, IDragStartEventArgs, IDropDroppedEventArgs, IgxButtonDirective, IgxCardComponent, IgxCardModule, IgxDragDirective, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxInsertDropStrategy, IgxLabelDirective, IgxPrefixDirective, IgxRippleDirective, IgxToggleDirective, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular';
@Component({
selector: 'app-drag-drop-sample',
templateUrl: './drag-drop.sample.html',
styleUrls: ['drag-drop.sample.scss'],
standalone: true,
- imports: [IgxDragDirective, NgIf, IgxIconComponent, IgxDragIgnoreDirective, NgClass, IgxButtonDirective, IgxRippleDirective, IgxToggleDirective, IgxDragHandleDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxLabelDirective, NgFor, IgxDropDirective, NgStyle, ShadowGridSampleComponent]
+ imports: [
+ NgFor, NgIf, NgStyle, NgClass,
+ IgxDragDirective, IgxDragIgnoreDirective, IgxDragHandleDirective, IgxDropDirective,
+ IgxIconComponent, IgxButtonDirective, IgxRippleDirective, IgxToggleDirective,
+ IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxLabelDirective,
+ ShadowGridSampleComponent
+ ]
})
export class DragDropSampleComponent {
@ViewChild('dragNoGhostAnim', { read: IgxDragDirective, static: true })
@@ -94,6 +100,11 @@ export class DragDropSampleComponent {
public toggleStartPageX;
public toggleStartPageY;
+ // Multi selection row drag
+ public sourceRows: any[] = Array.from(Array(10)).map((e, i) => { return {name: "Item " + i, selected: false}});
+ public targetRows: any[] = [];
+ public selectedRows: any[] = [];
+
/** List drag properties */
public draggedDir = null;
public draggedIndex = null;
@@ -437,4 +448,36 @@ export class DragDropSampleComponent {
public getCategoryMovies(inCategory: string){
return this.listNotes.filter(item => item.category === inCategory);
}
+
+
+ // Multi selection row drag
+ public rowClicked(event: MouseEvent): void {
+ const target = event.target as Element;
+ const clickedCardId = target?.id;
+ const index = this.sourceRows.findIndex((item) => item.name === clickedCardId);
+ if(index < 0) return;
+ this.sourceRows[index].selected = !this.sourceRows[index].selected;
+ }
+
+ public dragStartHandler(event: IDragStartEventArgs) {
+ const dragItemId = event.owner.element.nativeElement.id;
+ if(dragItemId !== undefined){
+ const index = this.sourceRows.findIndex((item) => item.name === dragItemId);
+ if(index >= 0) this.sourceRows[index].selected = true;
+ }
+
+ this.selectedRows = this.sourceRows.filter(item => item.selected).map((item) => { return {name: item.name, selected: false}});
+ }
+
+ public onSelectRowDropped() {
+ if(this.selectedRows.length === 0) return;
+ this.selectedRows.forEach(clickedCard => {
+ const dragItemIndexInFromArray = this.sourceRows.findIndex((item) => item.name === clickedCard.name);
+ this.sourceRows.splice(dragItemIndexInFromArray, 1);
+ });
+ this.targetRows.push(...this.selectedRows);
+ console.log(this.targetRows);
+
+ this.selectedRows = [];
+ }
}