Adds edge scroll functionality for drag interactions
Implements EdgeScrollManager to enable automatic scrolling during drag operations Introduces new scroll management system that: - Detects mouse proximity to container edges - Provides variable scroll speed based on mouse position - Compensates dragged elements during scrolling Enhances drag-and-drop user experience with smooth scrolling
This commit is contained in:
parent
8b95f2735f
commit
10d8a444d8
5 changed files with 219 additions and 2 deletions
|
|
@ -46,7 +46,22 @@ export class DragDropManager {
|
|||
constructor(
|
||||
private eventBus: IEventBus,
|
||||
private gridConfig: IGridConfig
|
||||
) {}
|
||||
) {
|
||||
this.setupScrollListener();
|
||||
}
|
||||
|
||||
private setupScrollListener(): void {
|
||||
this.eventBus.on(CoreEvents.EDGE_SCROLL_TICK, (e) => {
|
||||
if (!this.dragState) return;
|
||||
const { scrollDelta } = (e as CustomEvent<{ scrollDelta: number }>).detail;
|
||||
|
||||
// Element skal flytte med scroll for at forblive under musen
|
||||
// (elementets top er relativ til kolonnen, som scroller med viewport)
|
||||
this.dragState.targetY += scrollDelta;
|
||||
this.dragState.currentY += scrollDelta;
|
||||
this.dragState.element.style.top = `${this.dragState.currentY}px`;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize drag-drop on a container element
|
||||
|
|
@ -165,6 +180,9 @@ export class DragDropManager {
|
|||
const columnRect = columnElement.getBoundingClientRect();
|
||||
const targetY = e.clientY - columnRect.top - mouseOffset.y;
|
||||
|
||||
// Reset scroll compensation
|
||||
this.scrollDeltaY = 0;
|
||||
|
||||
// Initialize drag state
|
||||
this.dragState = {
|
||||
eventId,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue