@dfsj/ec-hooks/dist/browser/useDraggable.d.ts

贵州东方世纪常用 hook。

export interface DraggableOptions {
    dragTips?: string;
    dragZIndex: number;
}
type divRef = HTMLElement | null;
/**
 * 拖拽元素 hook
 * @param options
 * @param options.dragTips 鼠标移动到可拖拽元素上时的提示
 * @param options.dragZIndex 拖拽时的 z-index，默认为 10，可根据实际情况调整，防止被其他元素遮挡
 * @example
 * ```html
 * <script setup>
 * import { useDraggable } from 'petite-vue-hooks'
 * const { setDragEle } = useDraggable()
 * </script>
 * <template>
 *   <div :ref="setDragEle">拖动元素</div>
 * </template>
 * ```
 */
export declare function useDraggable(options?: DraggableOptions): {
    /**
     * 设置拖动元素
     */
    setDragEle: (ele: divRef) => void;
    /**
     * 设置限制拖动范围的元素
     */
    setExtentEle: (ele: divRef) => void;
    /**
     * 是否正在拖动
     */
    dragging: Readonly<import('vue').Ref<boolean, boolean>>;
    /**
     * 元素的位置
     */
    position: {
        readonly left: string;
        readonly top: string;
    };
    /**
     * 设置拖动时需要定位的元素, 默认为拖动元素
     */
    setPositionEle: (ele: divRef) => void;
    /**
     * 是否固定，固定后不可拖动
     * 值和 isDraggable 相反
     */
    isPanned: import('vue').ComputedRef<boolean>;
    /**
     * 是否可拖动
     */
    isDraggable: Readonly<import('vue').Ref<boolean, boolean>>;
    /**
     * 禁用拖动
     */
    disableDraggable: () => void;
    /**
     * 启用拖动
     */
    enableDraggable: () => void;
};
export {};