svelte-reorderable-list
Version:
A simple and accessible reorderable list component for Svelte 5.
87 lines • 2.59 kB
TypeScript
export interface DragState {
isKeyboardUser: boolean;
focusedItemKey?: string | null;
dragClone?: HTMLElement | null;
currentPosition: {
x: number;
y: number;
};
draggedElementOffset: {
x: number;
y: number;
};
isDragging: boolean;
draggedItemKey?: string | null;
}
export interface DragConfig {
disabled?: boolean;
cssSelectorHandle?: string;
animationDuration?: number;
}
/**
* Creates a visual clone of an element for drag operations
*/
export declare function createDragClone(originalElement: HTMLElement, clientX: number, clientY: number, offset: {
x: number;
y: number;
}): HTMLElement;
/**
* Updates the position of a drag clone element
*/
export declare function updateDragClonePosition(dragClone: HTMLElement, currentPosition: {
x: number;
y: number;
}, offset: {
x: number;
y: number;
}): void;
/**
* Gets the center point of a drag clone element
*/
export declare function getDragCloneCenter(dragClone: HTMLElement): {
x: number;
y: number;
};
/**
* Finds the closest item element from a target
*/
export declare function getItemElement(target: HTMLElement, itemSelector?: string): HTMLElement | null;
/**
* Extracts item key from an element's data attribute
*/
export declare function getItemKeyFromElement(element: HTMLElement): string | null;
/**
* Determines if a drag operation should be allowed based on target and config
*/
export declare function shouldAllowDrag(target: HTMLElement, config: DragConfig): boolean;
/**
* Calculates the offset from cursor to element origin
*/
export declare function calculateDragOffset(clientX: number, clientY: number, element: HTMLElement): {
x: number;
y: number;
};
/**
* Cleans up drag operation by removing clone and resetting state
*/
export declare function finalizeDragOperation(dragState: DragState): void;
/**
* Common focus management functions
*/
export declare const focusManager: {
handleFocus: (itemKey: string, state: DragState) => void;
handleBlur: (state: DragState) => void;
setKeyboardUser: (state: DragState, isKeyboard: boolean) => void;
};
/**
* Utility to check if an element is within the bounds of another element
*/
export declare function isPointInElement(point: {
x: number;
y: number;
}, element: HTMLElement): boolean;
/**
* Debounce utility for performance optimization
*/
export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
//# sourceMappingURL=drag-utils.d.ts.map