The ParentConfig<T> interface allows you to customize how a specific parent container handles drag-and-drop operations.
Common configuration options include:
accepts: A predicate (targetParentData, initialParentData, currentParentData, state) => boolean to determine if a parent accepts a specific node.dragHandle: A CSS selector for a specific element within a node that acts as the drag trigger.draggable: A function (child: HTMLElement) => boolean to determine if a specific element is draggable.draggableValue: A function (values: T) => boolean to determine if a specific value is draggable.group: A string used to group parents together, allowing nodes to be transferred between parents in the same group.sortable: A boolean flag to enable or disable sorting within the parent.dropZone: A boolean flag indicating if the parent itself acts as a drop zone.dragEffectAllowed & dragDropEffect: Set the NativeDragEffects ("link" | "none" | "copy" | "move") for the operation.draggingClass, dragPlaceholderClass, dropZoneClass, dropZoneParentClass: CSS classes applied during various stages of the drag lifecycle.longPress & longPressDuration: Configuration for touch-based long-press interactions.nativeDrag: If false, the library bypasses the native HTML5 Drag and Drop API in favor of synthetic pointer events.
export interface ParentConfig<T> {
accepts?: (
targetParentData: ParentRecord<T>,
initialParentData: ParentRecord<T>,
currentParentData: ParentRecord<T>,
state: BaseDragState<T>
) => boolean;
dragEffectAllowed: NativeDragEffects;
dragDropEffect: NativeDragEffects;
dragImage?: (data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
disabled?: boolean;
dragHandle?: string;
externalDragHandle?: {
el: HTMLElement;
callback: () => HTMLElement;
};
draggable?: (child: HTMLElement) => boolean;
draggableValue?: (values: T) => boolean;
draggedNodes: (pointerDown: { parent: ParentRecord<T>; node: NodeRecord<T>; }) => Array<NodeRecord<T>>;
draggingClass?: string;
dragstartClasses: (node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynthDrag?: boolean) => void;
dragPlaceholderClass?: string;
dropSwapConfig?: DropSwapConfig<T>;
dropZoneClass?: string;
dropZoneParentClass?: string;
dropZone?: boolean;
group?: string;
handleParentFocus: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
handleNodeKeydown: (data: NodeEventData<T>, state: DragState<T>) => void;
handleDragend: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleDragstart: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleEnd: (state: DragState<T> | SynthDragState<T>) => void;
handleNodeDrop: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleNodePointerup: (data: NodePointerEventData<T>, state: DragState<T>) => void;
handleParentScroll: (data: ParentEventData<T>, state: DragState<T> | BaseDragState<T> | SynthDragState<T>) => void;
handleNodeDragenter: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleNodeBlur: (data: NodeEventData<T>, state: DragState<T>) => void;
handleNodeFocus: (data: NodeEventData<T>, state: DragState<T>) => void;
handleNodeDragleave: (data: NodeEventData<T>, state: DragState<T>) => void;
handleParentDragover: (data: ParentDragEventData<T>, state: DragState<T>) => void;
handleParentDrop: (data: ParentDragEventData<T>, state: DragState<T>) => void;
handleNodeDragover: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handlePointercancel: (data: NodeDragEventData<T> | NodePointerEventData<T>, state: DragState<T> | SynthDragState<T> | BaseDragState<T>) => void;
handleNodePointerdown: (data: NodePointerEventData<T>, state: DragState<T>) => void;
handleNodePointerover: (e: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
handleParentPointerover: (e: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
insertConfig?: InsertConfig<T>;
longPress?: boolean;
longPressClass?: string;
longPressDuration?: number;
name?: string;
multiDrag?: boolean;
nativeDrag?: boolean;
performSort: ({ parent, draggedNodes, targetNodes }: { parent: ParentRecord<T>; draggedNodes: Array<NodeRecord<T>>; targetNodes: Array<NodeRecord<T>>; }) => void;
performTransfer: ({ currentParent, targetParent, initialParent, draggedNodes, initialIndex, state, targetNodes }: { currentParent: ParentRecord<T>; targetParent: ParentRecord<T>; initialParent: ParentRecord<T>; draggedNodes: Array<NodeRecord<T>>; initialIndex: number; state: BaseDragState<T> | DragState<T> | SynthDragState<T>; targetNodes: Array<NodeRecord<T>>; }) => void;
plugins?: Array<DNDPlugin>;
reapplyDragClasses: (node: Node, parentData: ParentData<T>) => void;
remapFinished: (data: ParentData<T>) => void;
root: Document | ShadowRoot;
selectedClass?: string;
setupNode: SetupNode;
setupNodeRemap: SetupNode;
tearDownNode: TearDownNode;
tearDownNodeRemap: TearDownNode;
threshold: { horizontal: number; vertical: number; };
synthDraggingClass?: string;
synthDragPlaceholderClass?: string;
synthDropZoneClass?: string;
sortable?: boolean;
synthDropZoneParentClass?: string;
synthDragImage?: (node: NodeRecord<T>, parent: ParentRecord<T>, e: PointerEvent, draggedNodes: Array<NodeRecord<T>>) => { dragImage: HTMLElement; offsetX?: number; offsetY?: number; };
onSort?: SortEvent<T>;
onTransfer?: TransferEvent<T>;
onDragstart?: DragstartEvent<T>;
onDragend?: DragendEvent<T>;
}
