diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
index a4f3859..b4977b2 100644
--- a/projects/demo/src/app/demo/demo.component.html
+++ b/projects/demo/src/app/demo/demo.component.html
@@ -177,6 +177,8 @@
clickie
grouped items {{groupedItems | json}}
+
+
{{item}}
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
index 33d4ada..2740895 100644
--- 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/projects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts
index b628775..8372dcb 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts
+++ b/projects/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%)`;
});
});
}