fix dragItemListeners setup

klippa-app · Dec 16, 2024 · d8f4fd9 · d8f4fd9
1 parent 4a34afc
commit d8f4fd9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -177,6 +177,8 @@
 <klp-form-file-input style="height: 100%;" [(ngModel)]="myfile" [multiple]="false" [onlyShowUploadButton]="false" (ngModelChange)="fileSelected($event)" [useFullParentSize]="false"></klp-form-file-input>
 <klp-form-button (click)="toggie()">clickie</klp-form-button>
 grouped items {{groupedItems | json}}
+
+
 <klp-form-sortable-items [(ngModel)]="sortableItems">
 	<ng-template let-item="item">
 		{{item}}

diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "18.25.3",
+  "version": "18.25.4",
   "publishConfig": {
     "access": "public"
   },

diff --git a/...ects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts b/...ects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts
@@ -51,24 +51,26 @@ export class SortableItemsComponent
 	}
 
 	ngAfterViewInit(): void {
+		this.setDragItemListeners();
 		this.dragItems.changes.subscribe(() => {
-			this.dragItems.forEach(e => {
-				this.ngZone.runOutsideAngular(() => {
-					e.nativeElement.removeEventListener('dragstart', this.onDragStart);
-					e.nativeElement.removeEventListener('dragover', this.onDragOver);
-					e.nativeElement.removeEventListener('dragenter', this.onDragEnter);
-					e.nativeElement.removeEventListener('dragend', this.onDragEnd);
-
-					e.nativeElement.addEventListener('dragstart', this.onDragStart);
-					e.nativeElement.addEventListener('dragover', this.onDragOver);
-					e.nativeElement.addEventListener('dragenter', this.onDragEnter);
-					e.nativeElement.addEventListener('dragend', this.onDragEnd);
-
-					this.dragItems.forEach((dragItem, i) => {
-						dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
-					});
+			this.setDragItemListeners();
+		});
+	}
 
-				});
+	private setDragItemListeners(): void {
+		this.dragItems.forEach(e => {
+			this.ngZone.runOutsideAngular(() => {
+				e.nativeElement.removeEventListener('dragstart', this.onDragStart);
+				e.nativeElement.removeEventListener('dragover', this.onDragOver);
+				e.nativeElement.removeEventListener('dragenter', this.onDragEnter);
+				e.nativeElement.removeEventListener('dragend', this.onDragEnd);
+
+				e.nativeElement.addEventListener('dragstart', this.onDragStart);
+				e.nativeElement.addEventListener('dragover', this.onDragOver);
+				e.nativeElement.addEventListener('dragenter', this.onDragEnter);
+				e.nativeElement.addEventListener('dragend', this.onDragEnd);
+
+				e.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
 			});
 		});
 	}