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%)`; }); }); }