# aiv367-drag

**Repository Path**: magb/aiv367-drag

## Basic Information

- **Project Name**: aiv367-drag
- **Description**: 提供2个拖拽函数, 支持桌面、移动端、触控笔。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-04-03
- **Last Updated**: 2023-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# aiv367-drag

#### 介绍

提供 2 个拖拽函数, 支持桌面、移动端、触控笔。

drag1：常规的拖拽函数。

drag2：拖拽过程带有平滑过渡效果的拖拽函数。

#### Gitee

[https://gitee.com/aiv367/aiv367-drag](https://gitee.com/aiv367/aiv367-drag)

#### 示例

[http://aiv367.gitee.io/aiv367-drag/demo/base.html](http://aiv367.gitee.io/aiv367-drag/demo/base.html)<br>
[http://aiv367.gitee.io/aiv367-drag/demo/grid.html](http://aiv367.gitee.io/aiv367-drag/demo/grid.html)

#### 安装

```
npm i aiv367-drag --save
```

#### 使用

```js
//导入模块
import { Drag1, Drag2 } from 'aiv367-drag';

//
/**
    常规拖拽函数
    Drag1(dom, opts)
    dom = HTMLElement | string
    opts = {
        diffSize?: number, // 偏移量超过此值开始拖动
        draggingClassName?: string, // 拖拽中的样式
        restrictParentContainer?: boolean, // 限制在父容器范围内移动
        handle?: string, // 拖拽dom
        xAxis?: boolean, // 允许水平拖拽
        yAxis?: boolean, // 允许垂直拖拽
        onDragStart?: (evt: PointerEvent, data: I_Drag1EventData) => void,
        onDragMove?: (evt: PointerEvent, data: I_Drag1EventData) => void | boolean, // 方法return false时，不执行交互，只返回拖拽数据
        onDragEnd?: (evt: PointerEvent, data: I_Drag1EventData) => void,
    }
*/
Drag1('#demo1', {
    onDragMove: (evt, data) => {
        //当 return false 时，不移动dom, 只返回具体数据
    },
});

/**
    带过渡效果拖拽函数
    Drag2(dom, opts)
    dom = HTMLElement | string
    opts = {
        diffSize?: number, // 偏移量超过此值开始拖动
        draggingClassName?: string, // 拖拽中的样式
        dragAnimatingClassName?: string, // 拖拽动画中的样式
        dragAnimatingSpeed?: number,
        restrictParentContainer?: boolean, // 限制在父容器范围内移动
        handle?: string, // 拖拽dom
        xAxis?: boolean, // 允许水平拖拽
        yAxis?: boolean, // 允许垂直拖拽
        onDragStart?: (evt: PointerEvent, data: I_Drag2EventData) => void,
        onDragMove?: (evt: PointerEvent, data: I_Drag2EventData) => void | boolean, // 方法return false时，不执行交互，只返回拖拽数据
        onDragEnd?: (evt: PointerEvent, data: I_Drag2EventData) => void,
        onAnimationFrame?: (data: any)=> void,
        onAnimationFrameEnd?: (data: any)=> void
    }
 * /
Drag2('#demo2', {
    onDragMove: (evt, data) => {},
});
```