Yc-Draggable (洋铲拖拽)

yc-draggable 采用的时候 空间对比法 进行交换位置。

没有啥花里胡哨的东西，就是简简单单的 通过 JS 进行 Dom 节点的交换操作，然后通过 配置项进行 逻辑性 判断过滤。

安装

npm install yc-draggable

配置项

// dom 元素
const container = document.querySelector('#container')

const draggable: DraggableInfo =  YcDraggable(container,{
     // 当前拖拽容器的名称
    name?: string;
    // 指定获取拖动后排序 dom节点的 属性名称
    attrName?: string;
    // 是否关闭用户选择文字效果
    offUserSelect?: boolean;
    // 组信息配置
    group?: GroupOptions | string;
    // 交换区域，设置方式与 css margin类似 默认 是整个节点大小，当设置为 ['10px','10px'] 则表示 节点移入 超过 10px 时候才进行交换处理，数值也可以为 数字/ 百分比。
    exchangeArea?: string | number | Array<string | number>;
    // 允许 将内容 拖拽至指定的容器内
    to?: string[];
    // 允许 添加的内容来源于哪些指定的容器
    from?: string[];
    // 鼠标抬起事件之后在进行交换处理
    swap?: boolean;
    // 当 swap 为 true 是的时候 悬停交换项进行添加的 类名
    swapClass?: string;
    // 当拖拽的内容 被拖拽进了其他容器的时候，不进行删除当前 节点， 而是进行 克隆一个
    clone?: boolean;
    // 是否允许排序
    sort?: boolean;
    // 是否启用多个节点进行同事拖拽拖动 - 暂未实现
    multiDrag?: boolean;
    // 交换动画的时间 - 毫秒
    animation?: number;
    // 指定拖拽句柄才能拖动父元素
    handle?: string;
    // 延迟时间 - 毫秒
    delay?: number;
    // 过滤容器中 子级节点的 dom 元素
    filter?: string;
    // 自定义停靠位置样式 class 名
    ghostClass?: string;
    // 指定样式类的元素才允许拖动
    draggable?: string;
    // 选中拖拽对象的样式
    chosenClass?: string;
    //  拖拽对象移动样式
    dragClass?: string;
    // 拖拽内容的透明度 默认 0.3
    opacity?: number;
    // 当拖拽的内容 进入一个新的容器的时候，将会被新的容器进行锁定，锁定该拖拽内容在定义的时间内归 新容器管理（默认 300ms）
    lockTime?: number;
    // 当拖拽按下的时候进行触发
    onStart?: (params: CallBackParams) => void;
    // 当拖拽结束抬起的时候进行触发
    onEnd?: (params: CallBackParams) => void;
    // 新增元素事件
    onAdd?: (params: CallBackParams) => void;
    // 把元素从组移除事件
    onRemove?: (params: CallBackParams) => void;
    // 当拖拽在移动的时候进行触发
    onMove?: (params: CallBackParams) => void;
    // 当拖拽的内容准备进行交换的进行触发 需要返回 boolean 值。false 不进行交换， true 允许交换
    onExchangeBefore?: (params: CallBackParams) => boolean;
    // 在交换成以后进行触发
    onExchangeEnd?: (params: CallBackParams) => void;
    // 拖拽的内容离开了容器
    onLeave?: (params: CallBackParams) => void;
    // 拖拽的内容进入了容器
    onEntry?: (params: CallBackParams) => void;
    // 克隆的逻辑是，将拖拽的内容拖拽至其他容器的时候，不移除当前容器的内容并进行新建，而是自定义内容去往其他容器
    onClone?: (dom: HTMLElement, to: HTMLElement) => HTMLElement;
    // 自定义拖拽时候的内容
    dragDom?: (dom: HTMLElement, params: {
      offset: { x: number, y: number };
    }) => HTMLElement;
    // 遮罩层处理 当鼠标 【移入】的的时候将会创建一个遮罩层容器，并且该遮罩层将会于 当前节点保持一致的空间
    mask?: {
      trigger: 'click' | 'hover',
      onlyOne?: boolean;
      handler?(dom: HTMLElement): HTMLElement | undefined;
    }
});

TypeScript 定义

export interface BuildResult<T> {
    getMasks(): Array<MaskInfo>;
    getDraggableInfo(container?: HTMLElement): DraggableInfoResult | undefined;
    addItem(dom: HTMLElement, index: number): T;
    appendItem(dom: HTMLElement): T;
    removeItem(dom: HTMLElement): T;
    getData(): Array<unknown>;
    getSort(): Array<string>;
    getContainer(): HTMLElement | null;
    getOptions(): Options;
    getAllDraggableInfos(): DraggableInfoResult[];
    domToContainer(dom: HTMLElement, container: HTMLElement): T;
    setOptions(options: Options): T;
    setSort(sorts: string[]): T;
    setDomData(dom: HTMLElement, data: any): T;
    setData(callback: (dom: HTMLElement) => any): T;
}

// 返回结果 Draggable
export type DraggableInfo = BuildResult<DraggableInfo>

// 参数回调结果
export interface CallBackParams extends BuildResult<CallBackParams> {
    getEvent(): MouseEvent;
}

团队介绍

作者: 戴向天

团队: 洋铲工作室

介绍：专注于地代码开发，为地代码开发人员提供优质的插件。助力开发人员快速搭建一个属于自己的地代码平台。

日期: 2022-11-07

QQ群：602504799

其他:

  yc-config-loader： 洋铲配置信息加载器

  yc-config-component-v3：基于 yc-config-loader 实现的 Vue3 配置化组件