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:

  • container 当 targets 是选择器时的获取范围 API:
  • update()
  • detect(x1?:number,y1?:number,x2?:number,y2?:number)

demo

test/index.html