@holyhigh/uitools.js NPM

UITools

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

安装

npm i @holyhigh/uitools.js

使用

import uitools from '@holyhigh/uitools.js'

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

API

Dragger
```
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
```
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
```
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
```
newRotator(
    selector: string | HTMLElement,
    opts?: RotatorOptions
)
```
options:
- onRotateStart(deg) 旋转开始时调用
- onRotate(deg) 旋转中调用
- onRotateEnd(deg) 旋转结束后调用
Selector
```
newSelector(
    selector: string | HTMLElement,
    opts?: SelectorOptions
)
```
options:
- targets 容器中可选择的元素。可以是选择器字符串或返回元素数组的函数
- class 选择器样式，字符串
- onSelectStart(target):boolean 选择开始时调用。返回 false 可以阻止选择
- onSelect(overlaps) 选择中调用
- onSelectEnd(overlaps) 选择结束后调用

CollisionDetector

newCollisionDetector(
    el: string | HTMLElement,
    targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection,
    opts?: CollisionDetectorOptions
)

options: