import { SortableDragOptions } from 'yc-pro-components/es/components/yc-plus-tree'; import { Ref } from 'vue'; import { default as Sortable } from 'sortablejs'; export type { SortableDragOptions }; /** * 拖拽事件回调 */ export interface SortableDragEvents { /** 拖拽开始事件 */ onStart?: (evt: Sortable.SortableEvent) => void; /** 拖拽结束事件 */ onEnd?: (evt: Sortable.SortableEvent) => void; /** 元素移动事件 */ onMove?: (evt: Sortable.MoveEvent, originalEvent: Event) => boolean | -1 | 1; /** 拖拽更新事件(在同一列表中排序) */ onUpdate?: (evt: Sortable.SortableEvent) => void; /** 元素添加事件(从其他列表添加) */ onAdd?: (evt: Sortable.SortableEvent) => void; /** 元素移除事件(移动到其他列表) */ onRemove?: (evt: Sortable.SortableEvent) => void; /** 拖拽选择事件 */ onChoose?: (evt: Sortable.SortableEvent) => void; /** 取消选择事件 */ onUnchoose?: (evt: Sortable.SortableEvent) => void; } /** * useSortableDrag 参数接口 */ export interface UseSortableDragParams { /** 树容器的 DOM 引用 */ containerRef: Ref; /** 拖拽配置选项 */ options: SortableDragOptions; /** 拖拽事件回调 */ events: SortableDragEvents; /** 搜索关键词(用于判断是否禁用拖拽) */ filterText?: Ref; /** 树节点容器选择器 */ treeNodeSelector?: string; } /** * useSortableDrag 返回值接口 */ export interface UseSortableDragReturn { /** 是否启用拖拽(搜索时自动禁用) */ isDraggableEnabled: Ref; /** SortableJS 实例 */ sortableInstance: Ref; /** 销毁拖拽实例 */ destroy: () => void; /** 启用拖拽 */ enable: () => void; /** 禁用拖拽 */ disable: () => void; } /** * 使用 SortableJS 实现树形组件拖拽 * * @param params - 拖拽参数配置 * @returns 拖拽控制方法和状态 * * @example * ```ts * const { isDraggableEnabled, destroy } = useSortableDrag({ * containerRef: treeRef, * options: { * enabled: true, * animation: 150, * handle: '.drag-handle' * }, * events: { * onEnd: (evt) => { * console.log('拖拽完成', evt); * } * } * }); * ``` */ export declare function useSortableDrag(params: UseSortableDragParams): UseSortableDragReturn;