ucc-ui/dist/types/hooks/useDraggle.d.ts

ucc-ui components library

import { Ref } from 'vue';
interface UseDraggleOptions {
    el: string | HTMLElement | Ref<HTMLElement | null>;
    dragEl: string | HTMLElement | Ref<HTMLElement | null>;
    moving?: (moveX: number, moveY: number) => void;
    end?: (endX: number, endY: number) => void;
}
interface UseDraggleReturn {
    isDraggle: Ref<boolean>;
    moveX: Readonly<Ref<number>>;
    moveY: Readonly<Ref<number>>;
    startX: Readonly<Ref<number>>;
    startY: Readonly<Ref<number>>;
    endX: Readonly<Ref<number>>;
    endY: Readonly<Ref<number>>;
    left: Readonly<Ref<number>>;
    top: Readonly<Ref<number>>;
    initialLeft: Readonly<Ref<number>>;
    initialTop: Readonly<Ref<number>>;
}
/**
 *
 * @param opts
 * @param opts.el 需要拖拽的元素
 * @param opts.dragEl 拖拽的元素
 * @param opts.moving 拖拽时触发的事件
 * @param opts.end 拖拽结束时触发的事件
 * @description 用于拖拽元素
 * @example
 * ```ts
 * const { isDraggle, moveX, moveY, startX, startY, endX, endY, left, top, initialLeft, initialTop } = useDraggle({
 *   el: '#app',
 *   dragEl: '#dragEl',
 * })
 * ```
 */
export default function useDraggle(opts: UseDraggleOptions): UseDraggleReturn;
export {};