@gdjiami/hooks/ie8/useDraggable.d.ts

react hooks for mygzb.com

import { RefObject } from 'react';
import { GestureCoordinate } from './useGesture';
export interface Coordinate {
    x: number;
    y: number;
}
export interface Size {
    width: number;
    height: number;
}
export interface Bounds extends Coordinate, Size {
}
export interface useDraggableOptions<T extends HTMLElement> {
    /**
     * 设置可以拖拽的方向. default is 'both'
     */
    axis?: 'x' | 'y' | 'both';
    /**
     * 默认的偏移
     */
    defaultTranslate?: {
        x: number;
        y: number;
    };
    /**
     * 设置拖拽的范围. bounds是基于screen的
     * 可以是selector 或者是'parent'
     */
    bounds?: Bounds | string;
    /**
     * 停靠边缘
     */
    edge?: boolean;
    edgePadding?: number;
    onDown?: (pos: GestureCoordinate) => false | void;
    onMove?: (pos: GestureCoordinate, offset: Coordinate) => void;
    onUp?: (pos: GestureCoordinate, offset: Coordinate) => void;
    disableTransform?: boolean;
    ref?: RefObject<T>;
}
/**
 * 给指定element注入可拖拽行为
 */
export default function useDraggable<T extends HTMLElement = HTMLDivElement>(options?: useDraggableOptions<T>): {
    ref: RefObject<T>;
    dragging: boolean;
    translate: {
        x: number;
        y: number;
    };
    resetOffset: () => void;
};