@syncfusion/react-base/src/draggable.d.ts

A common package of core React base, methods and class definitions

import { RefObject } from 'react';
import { PositionCoordinates } from './drag-util';
/**
 * Specifies the Direction in which drag movement happen.
 */
export type DragDirection = 'x' | 'y';
/**
 * Specifies the position coordinates.
 */
export interface IPosition {
    /**
     * Specifies the left position of cursor in draggable.
     */
    left?: number;
    /**
     * Specifies the top position of cursor in draggable.
     */
    top?: number;
}
/**
 * Hook to manage Position.
 *
 * @private
 * @param {Partial<IPosition>} props - Initial values for the position properties.
 * @returns {IPosition} - The initialized position properties.
 */
export declare function Position(props?: IPosition): IPosition;
/**
 * Interface to specify the drag data in the droppable.
 */
export interface DropInfo {
    /**
     * Specifies the current draggable element
     */
    draggable?: HTMLElement;
    /**
     * Specifies the current helper element.
     */
    helper?: HTMLElement;
    /**
     * Specifies the drag target element
     */
    draggedElement?: HTMLElement;
}
export interface DropObject {
    target?: HTMLElement;
    instance?: DropOption;
}
/**
 * Used to access values
 *
 * @private
 */
export interface DragPosition {
    left?: string;
    top?: string;
}
/**
 * Droppable function to be invoked from draggable
 *
 * @private
 */
export interface DropOption {
    /**
     * Used to triggers over function while draggable element is over the droppable element.
     */
    intOver?: Function;
    /**
     * Used to triggers out function while draggable element is out of the droppable element.
     */
    intOut?: Function;
    /**
     * Used to triggers  out function while draggable element is dropped on the droppable element.
     */
    intDrop?: Function;
    /**
     * Specifies the information about the drag element.
     */
    dragData?: DropInfo;
    /**
     * Specifies the status of the drag of drag stop calling.
     */
    dragStopCalled?: boolean;
}
/**
 * Drag Event arguments
 */
export interface DragEventArgs {
    /**
     * Specifies the actual event.
     */
    event?: MouseEvent & TouchEvent;
    /**
     * Specifies the current drag element.
     */
    element?: HTMLElement;
    /**
     * Specifies the current target element.
     */
    target?: HTMLElement;
    /**
     * 'true' if the drag or drop action is to be prevented; otherwise false.
     */
    cancel?: boolean;
}
/**
 * Draggable interface for public and protected properties and methods.
 */
export interface IDraggable {
    /**
     * Defines the distance between the cursor and the draggable element.
     */
    cursorAt?: IPosition;
    /**
     * If `clone` set to true, drag operations are performed in duplicate element of the draggable element.
     *
     * @default true
     */
    clone?: boolean;
    /**
     * Defines the parent element in which draggable element movement will be restricted.
     */
    dragArea?: HTMLElement | string;
    /**
     * Defines the dragArea is scrollable or not.
     */
    isDragScroll?: boolean;
    /**
     * Defines whether to replace drag element by currentStateTarget.
     *
     * @private
     */
    isReplaceDragEle?: boolean;
    /**
     * Defines whether to add prevent select class to body or not.
     *
     * @private
     */
    isPreventSelect?: boolean;
    /**
     * Specifies the callback function for drag event.
     *
     * @event drag
     */
    drag?: Function;
    /**
     * Specifies the callback function for dragStart event.
     *
     * @event dragStart
     */
    dragStart?: Function;
    /**
     * Specifies the callback function for dragStop event.
     *
     * @event dragStop
     */
    dragStop?: Function;
    /**
     * Defines the minimum distance draggable element to be moved to trigger the drag operation.
     *
     * @default 1
     */
    distance?: number;
    /**
     * Defines the child element selector which will act as drag handle.
     */
    handle?: string;
    /**
     * Defines the child element selector which will prevent dragging of element.
     */
    abort?: string | string[];
    /**
     * Defines the callback function for customizing the cloned element.
     */
    helper?: Function;
    /**
     * Defines the scope value to group sets of draggable and droppable items.
     * A draggable with the same scope value will be accepted by the droppable.
     *
     * @default 'default'
     */
    scope?: string;
    /**
     * Specifies the dragTarget by which the clone element is positioned if not given current context element will be considered.
     *
     * @private
     */
    dragTarget?: string;
    /**
     * Defines the axis to limit the draggable element drag path. The possible axis path values are
     * * `x` - Allows drag movement in horizontal direction only.
     * * `y` - Allows drag movement in vertical direction only.
     */
    axis?: DragDirection;
    /**
     * Defines the function to change the position value.
     *
     * @private
     */
    queryPositionInfo?: Function;
    /**
     * Defines whether the drag clone element will be split form the cursor pointer.
     *
     * @private
     */
    enableTailMode?: boolean;
    /**
     * Defines whether to skip the previous drag movement comparison.
     *
     * @private
     */
    skipDistanceCheck?: boolean;
    /**
     *
     * @private
     */
    preventDefault?: boolean;
    /**
     * Defines whether to enable autoscroll on drag movement of draggable element.
     * enableAutoScroll
     *
     * @private
     */
    enableAutoScroll?: boolean;
    /**
     * Gets the element of the draggable.
     */
    element?: RefObject<HTMLElement>;
    /**
     * Defines whether to enable taphold on mobile devices.
     * enableAutoScroll
     *
     * @private
     */
    enableTapHold?: boolean;
    /**
     * Specifies the time delay for tap hold.
     *
     * @default 750
     * @private
     */
    tapHoldThreshold?: number;
    /**
     *
     * @private
     */
    enableScrollHandler?: boolean;
    /**
     * Destroys the draggable instance by removing event listeners and cleaning up resources.
     *
     * @private
     */
    intDestroy?(): void;
    /**
     * Method to clean up and remove event handlers on the component destruction.
     *
     * @private
     */
    destroy?(): void;
}
/**
 * Draggable function provides support to enable draggable functionality in Dom Elements.
 *
 * @param {RefObject<HTMLElement>} element - The reference to the HTML element to be made draggable
 * @param {IDraggable} [props] - Optional properties to configure the draggable behavior
 * @returns {IDraggable} A Draggable object with draggable functionality
 */
export declare function useDraggable(element: RefObject<HTMLElement>, props?: IDraggable): IDraggable;
export declare namespace useDraggable {
    var getDefaultPosition: () => PositionCoordinates;
}