resig.js/build/module/extensions/drag-drop.d.ts

Universal reactive signal library with complete platform features: signals, animations, CRDTs, scheduling, DOM integration. Works identically across React, SolidJS, Svelte, Vue, and Qwik.

/**
 * Drag-n-Drop Reorder System
 * Uses Block.plug() with operad patterns for compositional drag-drop
 */
import { Block } from '../blocks';
export interface DragState<T> {
    isDragging: boolean;
    draggedItem: T | null;
    draggedIndex: number;
    targetIndex: number;
    offset: {
        x: number;
        y: number;
    };
}
export interface DragOperation<T> {
    source: number;
    target: number;
    item: T;
    timestamp: number;
}
export interface DraggableConfig<T> {
    data: T;
    index: number;
    onDragStart?: (item: T, index: number) => void;
    onDragEnd?: (operation: DragOperation<T>) => void;
    onDrop?: (operation: DragOperation<T>) => void;
    dragHandle?: string;
    placeholder?: (item: T) => string;
    ghost?: (item: T) => string;
}
export declare class DragContainer<T> {
    private config;
    private items;
    private dragState;
    private operations;
    private containerElement;
    private blocks;
    constructor(container: HTMLElement, initialItems: T[], config: {
        itemRenderer: (item: T, index: number) => string;
        onReorder?: (items: T[], operation: DragOperation<T>) => void;
        axis?: 'vertical' | 'horizontal' | 'both';
        tolerance?: number;
    });
    private createDraggableBlock;
    private plugDragBehavior;
    private setupContainer;
    private bindEvents;
    private createDragGhost;
    private removeDragGhost;
    private getDropIndex;
    private applyReorder;
    private resetDragState;
    private render;
    getItems(): T[];
    setItems(items: T[]): void;
    addItem(item: T, index?: number): void;
    removeItem(index: number): void;
    getOperations(): DragOperation<T>[];
    clearOperations(): void;
}
export declare const createDragContainer: <T>(container: HTMLElement, items: T[], config: {
    itemRenderer: (item: T, index: number) => string;
    onReorder?: (items: T[], operation: DragOperation<T>) => void;
    axis?: 'vertical' | 'horizontal' | 'both';
    tolerance?: number;
}) => DragContainer<T>;
export declare const composeDragBehaviors: <T>(behaviors: Array<(item: T, index: number) => Block>) => ((item: T, index: number) => Block);