From 4ec11dadb5a0e846d547f1a05ef1e0543e7fedbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 4 Mar 2024 17:42:22 +0300 Subject: [PATCH 1/2] Fixed #14935 - Drag-and-Drop Functionality Disrupted by extra tag (div) in Tag --- src/app/components/table/table.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index c327ccbd3ee..5516963ebf7 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -4878,8 +4878,12 @@ export class ReorderableRow implements AfterViewInit { } onMouseDown(event: Event) { - if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) this.el.nativeElement.draggable = true; - else this.el.nativeElement.draggable = false; + const targetElement = event.target as HTMLElement; + const parentElement = targetElement.parentNode as HTMLElement; + + const isHandleClicked = DomHandler.hasClass(targetElement, 'p-datatable-reorderablerow-handle') || DomHandler.hasClass(parentElement, 'p-datatable-reorderablerow-handle'); + + this.el.nativeElement.draggable = isHandleClicked; } onDragStart(event: DragEvent) { From 3ccb78a10069b0bd175b3ca415fb50ec7ec76224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 5 Mar 2024 10:25:55 +0300 Subject: [PATCH 2/2] add recursive function --- src/app/components/table/table.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 5516963ebf7..3ec022c668a 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -4879,11 +4879,20 @@ export class ReorderableRow implements AfterViewInit { onMouseDown(event: Event) { const targetElement = event.target as HTMLElement; - const parentElement = targetElement.parentNode as HTMLElement; + const isHandleClicked = this.isHandleElement(targetElement); + this.el.nativeElement.draggable = isHandleClicked; + } + + isHandleElement(element: HTMLElement): boolean { + if (element?.classList.contains('p-datatable-reorderablerow-handle')) { + return true; + } - const isHandleClicked = DomHandler.hasClass(targetElement, 'p-datatable-reorderablerow-handle') || DomHandler.hasClass(parentElement, 'p-datatable-reorderablerow-handle'); + if (element?.parentElement && !['TD', 'TR'].includes(element?.parentElement?.tagName)) { + return this.isHandleElement(element?.parentElement); + } - this.el.nativeElement.draggable = isHandleClicked; + return false; } onDragStart(event: DragEvent) {