纯前端函数，一个拖拽移动、调整大小、旋转、缩放的工具库

当前开源的元素变化操作组件有不少，但其功能样式并不一定符合每个开发人员的需求，所以不如抽离其核心的操作功能作为一个工具包来使用，开发人员就可以基于该工具包来开发自己的元素变化组件。

那么就从先最常见用的位置、大小、旋转、缩放等元素变化操作功能开始开发，开源一个元素的基本操作工具库Dom Transform Tool。

安装

sh 复制代码

npm i dom-transform-tool

使用

使用ES按需引入

js 复制代码

import { domDrag } from 'dom-transform-tool';

功能介绍

为了之后能兼容移动端的，方法调用时使用pointer指针作为触发事件，而不是鼠标；
除了使用指针调整，方法也都可以通过manual参数直接手动调整元素的样式；
方法调用时会通过target获取对应元素的样式信息，比如最大宽高、最小宽高、旋转、位置信息等，也可通过customStyle参数来自定义样式；
每个方法都有提供参数来控制每次调整的数值；
元素调整可以有不同的样式控制，如position、transform、translate等等，因此每个方法也将提供一个参数用于选择调整元素时使用的样式；
方法的调整单位默认都为px、deg，但你可通过customRender来修改每次调整后的具体数值，如修改为rem、%等；
当你希望自己手动调整元素时，可以配置disableUpdate为true，便可在callback回调函数中自己操作元素；
结束调整的控制事件默认为指针抬起，如果希望自定义控制结束事件的话可以将disablePointerEnd设置为true，然后通过方法的返回值获取释放函数，自定义处理事件的释放，如（endPointerHandler = domResize()，endPointerHandler为释放函数）；
...更多请自行查看文档中API的参数配置

1. 元素拖拽 (domDrag)

使用domDrag时可以使用指针点击元素进行拖拽移动，使用direction参数还可以控制元素仅在横轴或纵轴移动。

ts 复制代码

function handleTargetDrag(event: PointerEvent) {
  domDrag({
    target: event.target
    pointer: event,
  });
}

2. 元素调整大小 (domResize)

domResize内置多达15种不同的调整方向，可以直接针对不同的单方向、双方向、三方向进行调整大小。除此之外还可设置lockAspectRatio锁定可调整横轴和纵轴时的大小比例，crossAxis控制在变小调整到最小时可否越轴调整到反方向变大。

ts 复制代码

function handleTargetResize(event: PointerEvent) {
  domResize({
    target: event.target
    pointer: event,
    offsetType: 'translate',
  });
}

3. 元素旋转 (domRotate)

domRotate可用于拖拽时让元素跟随指针位置进行旋转。

ts 复制代码

function handleTargetRotate(event: PointerEvent) {
  domRotate({
    target: event.target
    pointer: event,
  });
}

4. 元素缩放 (domScale)

domScale是用于调整元素的缩放大小，但目前未提供指针进行调整的功能。

ts 复制代码

function handleTargetScale(event: WheelEvent, scaleTarget: HTMLElement) {
  const { deltaY } = event;
  const scaleValue = deltaY > 0 ? 0.1 : -0.1;
  domScale({
    target: scaleTarget,
    manual: { scale: scaleValue },
  });
}

GitHub地址

github.com/nixwai/dom-...

纯前端函数，一个拖拽移动、调整大小、旋转、缩放的工具库

安装

使用

功能介绍

1. 元素拖拽 (domDrag)

2. 元素调整大小 (domResize)

3. 元素旋转 (domRotate)

4. 元素缩放 (domScale)

更多功能

GitHub地址