純前端函數，一個拖曳移動、調整大小、旋轉、縮放的工具庫

純前端函式，一個拖曳移動、調整大小、旋轉、縮放的工具庫

目前開源的元素變化操作元件有不少，但其功能樣式並不一定符合每個開發人員的需求，所以不如將其核心的操作功能抽離出來作為一個工具包來使用，開發人員就可以基於該工具包來開發自己的元素變化元件。

那麼就從最常見的用位置、大小、旋轉、縮放等元素變化操作功能開始開發，開源一個元素的基本操作工具庫 Dom Transform Tool。

安裝

npm i dom-transform-tool

使用

使用ES按需引入

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參數還可以控制元素僅在橫軸或縱軸移動。

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

2. 元素調整大小 (domResize)

domResize內置多達15種不同的調整方向，可以直接針對不同的單方向、雙方向、三方向進行調整大小。除此之外還可設置lockAspectRatio鎖定可調整橫軸和縱軸時的大小比例，crossAxis控制在變小調整到最小時可否越軸調整到反方向變大。

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

3. 元素旋轉 (domRotate)

domRotate可用於拖曳時讓元素跟隨指針位置進行旋轉。

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

4. 元素縮放 (domScale)

domScale是用於調整元素的縮放大小，但目前未提供指針進行調整的功能。

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