PrimeNG 树 D&D Droppoint CSS 自定义: 回归
作者: ArnaudPanaiotisSeira创建于 2026年3月20日更新于 2026年9月17日
标签Type: BugType: Breaking ChangeResolution: Stale
Describe the bug Hello, We have CSS on PrimeNG tree droppoint setting height. I have some changes to offer, but you may not want all of them, then I opted to create this ticket instead of a PR. Upgrading to version 21.1.1, we found a regression customizing the droppoint introduced in this commit. The droppoint used to be full time visible, and is now conditionned on first 25% for previous droppoint and last 25% for after droppoint. How to reproduce (extraction): .tree { .p-tree-node-drop-point { height: 50px; } } ##### Issue 1 Opening previous droppoint leads to exiting the first 25% and close droppoint. Also leaving node to opened next droppoint leads to the same issue. Fix : - Identify event for previous/next droppoint - Manage exit node on top/bottom/side according the the node - Add events on droppoint - (dragleave)="onNodeDragLeave()" (dragleave)="onNodeDragLeave($event)" - onNodeDragLeave() { this.isPrevDropPointHovered.set(false); this.isNextDropPointHovered.set(false); } onNodeDragLeave(event: any) { let rect = event.currentTarget.getBoundingClientRect(); if ( event.x > rect.left + rect.width || // right leave event.x < rect.left // left leave ) { this.isPrevDropPointHovered.set(false); this.isNextDropPointHovered.set(false); } } - <div [class]="cx('dropPoint')"] [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"> - <div [class]="cx('dropPoint')"] [attr.aria-hidden]="true" (dragleave)="onDropPointDragLeave($event, 'previous')" (drop)="onDropPoint($event, 'previous')" [pBind]="getPTOptions('dropPoint')"> - <div [class]="cx('dropPoint', { next: true })"] [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"> - <div [class]="cx('dropPoint', { next: true })"] [attr.aria-hidden]="true" (dragleave)="onDropPointDragLeave($event, 'next')" (drop)="onDropPoint($event, 'next')" [pBind]="getPTOptions('dropPoint')"> - onDropPoint(event: any, _position: string) { this.onNodeDrop(event); } onDropPointDragLeave(event: any, position: string) { let rect = event.currentTarget.getBoundingClientRect(); if (position === 'previous' && event.y < Math.floor(rect.top + rect.height)) { this.isPrevDropPointHovered.set(false); } if (position === 'next' && event.y > Math.ceil(rect.bottom - rect.height)) { this.isNextDropPointHovered.set(false); } }
内容来源: primefaces/primeng