# uitools.js

**Repository Path**: holyhigh2/uitools.js

## Basic Information

- **Project Name**: uitools.js
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-03-20
- **Last Updated**: 2023-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 鼠标操作, dragger, Dom, Drag, resizer

## README

> # !!! 该库已迁移至 [Uiik](https://github.com/holyhigh2/uiik)，本仓库不再维护 !!!

# UITools

ui 辅助工具，提供样式无关的交互逻辑

## 示例

[live examples](https://holyhigh2.gitee.io/uitools.js/)

## 安装

```javascript
npm i @holyhigh/uitools.js
```

## 使用

```javascript
import uitools from '@holyhigh/uitools.js'

uitools.newDragger('#dragger1')
uitools.newDragger('#dragger2 .sensor', {
  container: true,
  dragDom: '#dragger2',
})
uitools.newResizer('#dragger2', { dir: ['se'] })
```

## API

- Dragger

  ```js
  newDragger(
      sensor: string | HTMLElement | Array<string | HTMLElement>,
      opts?: DraggerOptions
  )
  ```

  options:

  - container 限制活动范围，默认 false
  - threshold 拖动起始阈值，默认 0
  - handle sensor 内实际响应拖动的元素选择器，字符串
  - droppable 拖动目标，dom/selector 数组，用于拖动交互事件
  - iframes 允许拖动交互的 iframe 数组
  - ghostMode 开启 ghost 模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认 false
  - ghostClass 副本样式。字符串
  - direction 传递 v/h 可实现单向移动。默认''
  - snap 拖动元素可自动吸附的目标元素选择器。字符串

  > dragger 事件

  - onDragStart(el,ev) 拖动开始时调用
  - onDrag(el,x,y,ev):false 拖动中调用，返回 false 阻止 dom 移动
  - onDragEnd(el,ev) 拖动结束后调用
  - onClone(ghostEl,ev) 当 ghost 模式开启后，在 onDragStart 之后触发

  > targets 事件

  - onDragEnter(target,ev)
  - onDragLeave(target,ev)
  - onDrop(target,ev)

  > snap 事件

  - onSnap(el,targetH,targetV,hDir,vDir) 发生吸附时触发。该事件与 onDrag 冲突

  API:

  - setOptions(options: DraggerOptions | undefined)

- Resizer

  ```js
  newResizer(
      selector: string | HTMLElement,
      opts?: ResizerOptions
  )
  ```

  options:

  - sensorSize 感应区域尺寸
  - minSize/maxSize 最小/大区域，如果是数组可以定义宽、高
  - dir resizer 方向，数组[n,s,e,w,ne,nw,se,sw]
  - onDragStart(w,h) 拖动开始时调用
  - onDrag(w,h) 拖动中调用
  - onDragEnd(w,h) 拖动结束后调用

- Splitter

  ```js
  newSplitter(
      selector: string | HTMLElement,
      type: SplitterType, //v或者h
      opts?: SplitterOptions
  )
  ```

  options:

  - sensorSize 感应区域尺寸
  - domPair 分割的 dom 对数组，如果拖动器与需要分割的 dom 并非同级时可显示指定
  - stripMode 感应带模式，启用后会直接使用绑定的 dom 作为整个感应拖动区域
  - minSize 最小区域，如果是数组可以定义两侧
  - oneSideMode 单边模式，只修改单侧元素 size，用于 flex 布局。可选值为 start/end
  - sticky 粘性吸附，如果是数组可以定义两侧，必须设置 minSize 后生效。当拖动已触发 minSize 并继续朝同方向拖动超过 minSize/2 距离时，该侧距离会立刻变为 0
  - onDragStart(size1,size2) 拖动开始时调用
  - onDrag(size1,size2) 拖动中调用
  - onDragEnd(size1,size2) 拖动结束后调用
  - onSticky(size1,size2,position) 触发 sticky 时调用

- Rotator

  ```js
  newRotator(
      selector: string | HTMLElement,
      opts?: RotatorOptions
  )
  ```

  options:

  - onRotateStart(deg) 旋转开始时调用
  - onRotate(deg) 旋转中调用
  - onRotateEnd(deg) 旋转结束后调用

- Selector

  ```js
  newSelector(
      selector: string | HTMLElement,
      opts?: SelectorOptions
  )
  ```

  options:

  - targets 容器中可选择的元素。可以是选择器字符串或返回元素数组的函数
  - class 选择器样式，字符串
  - onSelectStart(target):boolean 选择开始时调用。返回 false 可以阻止选择
  - onSelect(overlaps) 选择中调用
  - onSelectEnd(overlaps) 选择结束后调用

- CollisionDetector
  ```js
  newCollisionDetector(
      el: string | HTMLElement,
      targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection,
      opts?: CollisionDetectorOptions
  )
  ```
  options:
  - container 当 targets 是选择器时的获取范围
    API:
  - update()
  - detect(x1?:number,y1?:number,x2?:number,y2?:number)

## demo

test/index.html