moveable摘要中文文档

请叫我_胖子

已于 2023-03-16 18:08:26 修改

阅读量1.8k

点赞数 9

分类专栏：插件使用文档分享文章标签：文档资料 Powered by 金山文档

于 2023-03-06 11:10:48 首次发布

本文链接：https://blog.csdn.net/qq_35990111/article/details/129320864

版权

文档分享同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

插件使用

3 篇文章 0 订阅

订阅专栏

moveable官网文档

看英文文档太累了😖。。。小小的翻译整理一下

Moveable

Moveable // 可移动是可拖拽的!可调整大小的!可伸缩的!可旋转的!
    Options
        target // 目标指定为可移动控制框。栗子：moveable.target = document.querySelector(".target");
        dragTarget // 要拖动的目标可移动目标。 dragTarget?: SVGElement | HTMLElement | null
        rootContainer // 可移动根容器(未转换容器)
        viewContainer // 在查看器中设置拖拽信息
        useResizeObserver // 当目标大小发生变化时，是否检测并更新目标大小。栗子：moveable.useResizeObserver = true;
        zoom //放大一个可移动的元素。栗子：moveable.zoom = 2;
        transformOrigin // 目标的默认transformOrigin可以提前设置。默认''
        ables // 添加自定义功能。默认[]
        className // 指定可移动控件框的className。默认''
        pinchThreshold // 最小的夹紧距离。默认20
        pinchOutside // 包含目标的容器是否变为pinch。默认true
        triggerAblesSimultaneously // 同时生成可选事件。(如可调整大小，可伸缩)。默认false
        checkInput // 检查该元素是否是用于输入文本或可满足内容的元素，并防止拖动。默认false
        cspNonce // 为CSP样式添加nonce属性。默认''
        translateZ // 设置moveable的translateZ值。默认50
        hideDefaultLines // 是否隐藏目标矩形对应的行。默认false
        stopPropagation  // 是否防止冒泡事件，如鼠标按下，触摸启动等。默认false
        preventClickEventOnDrag // 防止拖动时的单击事件。(mousemove touchmove)。默认true
        preventClickDefault // 防止dragStart上的单击事件。(mousedown touchstart)。默认fasle
        props // 使用对象格式的道具或自定义道具。默认{}
        persistData // 首次渲染的数据。默认null
        useAccuratePosition // 是否准确显示可移动控件框的位置因为使用了getBoundingClientRect, css zoom, transform: rotate在container和rootContainer之间不能使用。不支持Group。默认false
        linePadding // 通过向行添加填充，可以增加可以单击和拖动的行区域。默认0
    Members
        zoom // 放大一个可移动的元素。栗子：moveable.zoom = 2;
        useResizeObserver // 当目标大小发生变化时，是否检测并更新目标大小。栗子：moveable.useResizeObserver = true;
        target // 目标指定为可移动控制框。栗子：moveable.target = document.querySelector(".target");
        passDragArea // 设置' pointerEvents: none; ' css在dragArea中传递事件。 (默认值: false) 栗子：dragArea: false
        padding // 在目标周围添加填充以增加拖拽面积。栗子：moveable.padding = { left: 10, top: 10, right: 10, bottom: 10 };moveable.updateRect();
        origin // 原点控制框是否可见(默认值:true)。栗子：moveable.origin = true;
        edge // 调整大小，缩放边缘的事件。栗子：moveable.edge = true;
        dragTarget // 要拖动的目标可移动目标。栗子：moveable.dragTarget = document.querySelector(".dragTarget");
        dragArea // 添加一个事件到可移动区域，而不是stopPropagation的目标。(默认值:false, true在组)栗子：moveable.dragArea: false
        className // 指定可移动控件框的className。栗子：moveable.className = "moveable1";
    Methods
        waitToChangeTarget // 用户更改目标并等待目标更改。
        updateTarget // 如果宽度，高度，左，和顶部的唯一目标改变，更新可移动的形状。栗子：moveable.updateTarget(type?："Start" | "" | "End");
        updateSelectors // 如果目标中与选择器对应的元素列表被更改，则更新它。
        updateRect // 如果所有元素的宽度、高度、左侧和顶部发生变化，则更新可移动对象的形状。栗子：moveable.updateRect(type?："Start" | "" | "End"，isTarget?： boolean，isSetState?：boolean);
        trigger // 触发一个事件来调用侦听器。
        stopDrag // 通过外部的方法停止当前正在进行的拖动。栗子：moveable.stopDrag();
        request // 通过方法而不是事件请求。在执行时，执行requestStart，然后可以通过Requester执行request和requestEnd。
        once // 向已注册的事件添加一个一次性监听器和Use promise。
        on // 向已注册的事件添加侦听器。
        off // 删除在事件目标中注册的侦听器。
        isMoveableElement // 检查目标是否包含在可移动元素中。
        isInside // 坐标是否在可移动的内部
        isDragging // 检查可移动状态是否正在被拖动。
        hitTest // 在可移动目标上测试一个元素或矩形。(100% = 100)
        getTargets // 通过可移动的目标或道具目标获得目标。
        getRect // 根据容器获取目标的顶点信息、位置和偏移量大小信息。
        getManager // 获得一个管理可移动对象的状态和道具的管理器。
        getAble // 在MoveableManager中使用able。
        emit // 触发一个事件来调用侦听器。
        dragStart // 可以通过外部的“MouseEvent”或“TouchEvent”拖动启动Moveable。
        destroy // 移除可移动对象和事件。
    Events
        renderStart // 发生在所有事件的第一个开始。
        renderGroupStart // 发生在组中所有事件的第一个开始。
        renderGroupEnd // 发生在组中所有事件的末尾。
        renderGroup // 发生在目标在group中被绘制到屏幕上之前。
        renderEnd // 发生在所有事件的末尾。
        render // 发生在目标被绘制到屏幕上之前。
        clickGroup // 单击组中的元素时，将调用' clickGroup '事件。
        click // 击元素时，' click '事件被调用。
    Type Definitions // 类型定义
        TransformObject: {
            style: string,
            cssText: string,
            transform: string,
            afterTransform: string
        }
        Requester: {
            request: (param: RequestParam) => this, // 继续执行请求
            requestEnd: () => this //结束请求
        }
        RenderDirections： { // 设置方向以显示控制框。
            renderDirections?: boolean | string[] // false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
        }
        RectInfo: {
            pos1: number[] // 顶点坐标
            pos2: number[]
            pos3: number[]
            pos4: number[]
            left: number // 目标相对于容器的left/top位置
            top: number
            width: number // 可移动元素的宽度
            height: number // 可移动元素的高度
            offsetWidth: number // 目标的偏移宽度
            offsetHeight: number // 目标的偏移高度
            origin: number[] // 绝对变换原点
            beforeOrigin: number[] // 变换前的绝对变换原点
            transformOrigin: number[] // 目标变换原点
            rotation: number // 旋转的绝对值
            children?: RectInfo[] // 使用一个组，可以得到子moveables的rect信息
        }
        PersistRectData: Omit<Partial<RectInfo>, "children"> & {children?: Array<Partial<RectInfo>>}
        PaddingOptions: padding?: PaddingBox // 在目标周围添加填充以增加拖拽面积。
        PaddingBox // padding值
        OriginOptions // origin?: boolean
        OnTransformStartEvent: 
            setTransform: (transform: string | string[], transformIndex?: number) => void // 转换目标的内联样式
            setTransformIndex: (transformIndex: number) => void // 在transform或last中使用该属性进行索引
        ......
        麻了麻了，后面的类型定义都自己去看英文文档吧。。

EventEmitter

EventEmitter // 在对象或组件上实现EventEmitter。
    Methods
        trigger // 触发一个事件来调用侦听器。
        once // 向已注册的事件添加一个一次性监听器和Use promise。
        on // 向已注册的事件添加侦听器。
        off // 删除在事件目标中注册的侦听器。
        emit // 触发一个事件来调用侦听器。

// 栗子
import EventEmitter from "@scena/event-emitter";
const emitter = new EventEmitter();

emitter.on("a", e => {});

// emit
emitter.trigger("a", {a: 1}); // 返回:如果为false，停止该事件。
emitter.emit("a", {a: 1});

// Add a disposable listener in "a" event
emitter.once("a", () => {});

// Use Promise
emitter.once("a").then(e => {});

// Add listener in "a" event
emitter.on("a", () => {});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});

// Remove all listeners.
emitter.off();
// Remove all listeners in "A" event.
emitter.off("a");
// Remove "listener" listener in "a" event.
emitter.off("a", listener);

Moveable.Snappable

Moveable.Snappable // 目标是否能被扣到导轨上。(默认值:false)
    Members
        verticalGuidelines // 在垂直方向上添加指导方针。(默认值:[]) 栗子：moveable.verticalGuidelines = [100, 200, 500];
        snapThreshold // 距离值可以抓拍到指导方针。(默认值:5) 栗子：moveable.snapThreshold = 5;
        snappable // 目标是否能被扣到导轨上。(默认值:false) 栗子：moveable.snappable = true;
        snapGridWidth // 如果宽度大小大于0，则可以垂直抓拍网格。(默认值:0) 栗子：moveable.snapGridWidth = 5;
        snapGridHeight // 如果高度大小大于0，则可以水平抓拍网格。(默认值:0) 栗子：moveable.snapGridHeight = 5;
        snapGap // 当您拖动时，使元素指导线中的间隙断开。(默认值:true) 栗子：moveable.snapGap = false;
        snapDistFormat // 设置指南中显示的距离的文本格式。(默认值:self) 栗子：moveable.snapDistFormat = (v, type) => `${v}px`;
        snapDirections // 指定捕捉到目标的方向。(默认值:{左:true，上:true，右:true，下:true})
                       // 栗子：moveable.snapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };
        snapDigit // 快照距离数字(默认值:0) 栗子：moveable.snapDigit = 0
        snapContainer // 一个snap容器，它是snap、bounds和innerBounds的基础。(默认值:null = container) 栗子：moveable.snapContainer = document.body;
        isDisplaySnapDigit // 是否显示快照距离(默认值:true) 栗子：moveable.isDisplaySnapDigit = true;
        isDisplayInnerSnapDigit // 是否显示元素内部快照距离(默认值:false) 栗子：moveable.isDisplayInnerSnapDigit = true;
        innerBounds // 建立内部的界限。栗子：moveable.innerBounds = { left: 500, top: 500, width: 100, height: 100};
        horizontalGuidelines // 在水平方向上添加指导方针。(默认值:[]) 栗子：moveable.horizontalGuidelines = [100, 200, 500];
        elementSnapDirections // 指定元素的对齐方向。(默认值:{左:true，上:true，右:true，下:true})
                              // 栗子：moveable.elementSnapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };
        elementGuidelines // 为元素添加指针。(默认值:[]) 栗子：moveable.elementGuidelines = [document.querySelector(".element"),];
        bounds // 设定界限。栗子：moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};
    Events
        snap // 当你拖动或dragControl时，' snap '事件被调用。

    // 栗子
    moveable.snappable = true
    moveable.on("snap", e => {
        console.log("onSnap", e);
    });

Moveable.Warpable

Moveable.Warpable // Warpable表示目标是否可以被扭曲(扭曲，弯曲)。
    Members
        warpable // 目标是否可以扭曲。(默认值:false) 栗子：moveable.warpable = true;
        renderDirections // 设置方向以显示控制框。(默认值:["n", "nw", "ne", "s", "se", "sw", "e", "w"])
                         // 栗子：moveable.renderDirections = ["nw", "ne", "sw", "se"];
    Events
        warpStart // 当warp开始时，warpStart事件被调用。
        warpEnd // 当warp结束时，warpEnd事件被调用。
        warp // 当进行透视扭曲变形，将调用透视扭曲变形。
// 栗子
import Moveable from "moveable";
let matrix = [
 1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1,
];
const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warp", ({ target, transform, delta, multiply }) => {
   // target.style.transform = transform;
   matrix = multiply(matrix, delta);
   target.style.transform = `matrix3d(${matrix.join(",")})`;
});
moveable.on("warpEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});
moveable.on("warpStart", ({ target }) => {
    console.log(target);
});

Moveable.Scrollable

Moveable.Scrollable // 目标是否可以滚动到滚动容器(默认:false)
    Options
        scrollable // 目标是否可以滚动到滚动容器。默认值:false
        scrollContainer // 应用滚动的容器。节点<HTMLElement>
        scrollThreshold // 扩大滚动检查区域的范围。默认值:0
        scrollThrottleTime // 保持拖拽时滚动发生的时间间隔设置为0，表示不发生。默认值:0
        getScrollPosition // 设置一个函数来获取滚动位置。getScrollPosition?: (e: {scrollContainer: HTMLElement, direction: number[]}) => number[]
        scrollOptions // 选项滚动拖动
    Events
        scrollGroup // 当拖动光标离开scrollContainer时，将发生' scrollGroup '事件以滚动到组中。
        scroll // 当拖动光标离开scrollContainer时，会发生' scroll '事件来滚动。

// 选项滚动拖动栗子
const scrollOptions = {
    container: () => viewer.getContainer(),
    threshold: 20,
    getScrollPosition: () => {
        return [
            viewer.getScrollLeft({ absolute: true }),
            viewer.getScrollTop({ absolute: true }),
        ];
    },
};

import Moveable from "moveable";

// scroll栗子
const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

// scrollGroup栗子
const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

Moveable.Scalable

Moveable.Scalable // 可缩放是指目标的x和y是否可以缩放变换。
    Members
        throttleScale // 伸缩对scaleX, scaleY的阻止。栗子：moveable.throttleScale = 0.1;
        scalable // 是否可伸缩。栗子：moveable.scalable = true;
        renderDirections // 设置方向以显示控制框。(默认值: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
                         // 栗子：moveable.renderDirections = ["nw", "ne", "sw", "se"];       
        keepRatio // 当调整大小或缩放时，保持宽度，高度的比例。(默认值:false) 栗子：moveable.keepRatio = true;
    Methods
        request
    Events
        scaleStart // 当缩放开始时调用。
        scaleGroupStart // 当租缩放开始时调用。
        scaleGroupEnd // 当组缩放结束时调用。
        scaleGroup // 当组缩放时调用。
        scaleEnd // 当缩放结束时调用。
        scale // 缩放时调用。
        beforeScale // 缩放时，在' scale '发生之前调用' beforeScale '。在' beforeScale '中，可以获取和设置缩放前的预值。

// request栗子
// Instantly Request (requestStart - request - requestEnd)
moveable.request("scalable", { deltaWidth: 10, deltaHeight: 10 }, true);

// requestStart
const requester = moveable.request("scalable");

// request
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });

// requestEnd
requester.requestEnd();

// 事件
import Moveable from "moveable";

const moveable = new Moveable(document.body, { scalable: true });
// scaleStart
moveable.on("scaleStart", ({ target }) => {
    console.log(target);
});
// scaleGroupStart
moveable.on("scaleGroupStart", ({ targets }) => {
    console.log("onScaleGroupStart", targets);
});
// scaleGroupEnd
moveable.on("scaleGroupEnd", ({ targets, isDrag }) => {
    console.log("onScaleGroupEnd", targets, isDrag);
});
// scaleGroup
moveable.on("scaleGroup", ({ targets, events }) => {
    console.log("onScaleGroup", targets);
    events.forEach(ev => {
        const target = ev.target;
        // ev.drag is a drag event that occurs when the group scale.
        const left = ev.drag.beforeDist[0];
        const top = ev.drag.beforeDist[1];
        const scaleX = ev.scale[0];
        const scaleY = ev.scale[1];
    });
});
// scaleEnd
moveable.on("scaleEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});
// scale
moveable.on("scale", ({ target, transform, dist }) => {
    target.style.transform = transform;
});
// beforeScale
moveable.on("beforeScale", ({ setFixedDirection }) => {
    if (shiftKey) {
       setFixedDirection([0, 0]);
    }
});

Moveable.Roundable

Moveable.Roundable // 是否显示并拖动或双击border-radius
    Members
        roundRelative // %可以用来代替绝对px。栗子：moveable.roundRelative: false
        roundPadding // 圆形控件位置的填充值。栗子：moveable.roundPadding = 15;
        roundClickable // 是否可以通过双击一行或控件来添加/删除圆形控件。(默认值:true) 栗子：moveable.roundClickable = false;
        roundable // 是否显示并拖动或双击border-radius，(默认值:false) 栗子：moveable.roundable: true,
        minRoundControls // 最少数量的轮控制。它通过控制按比例移动。[水平，垂直](默认值:[0,0]) 栗子：moveable.minRoundControls = [1, 0];
        maxRoundControls // 轮控制的最大数量。它通过控制按比例移动。[水平，垂直](默认值:[4,4]) 栗子：moveable.maxRoundControls = [1, 0];
        isDisplayShadowRoundControls // 是否显示实际上不作为阴影存在的圆形控件。(默认值:false) 栗子：moveable.isDisplayShadowRoundControls = true;
    Events
        roundStart // 当拖动开始剪辑区域或控件时
        roundGroupStart // 当拖动开始剪辑区域或控件时（组）
        roundGroupEnd // 当拖动结束边界区域或控件时(组)
        roundGroup // 当拖动或双击边界区域或控件时(组)
        roundEnd // 当拖动结束边界区域或控件时
        round // 当拖动或双击边界区域或控件时

// 事件
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});
// 组
const moveable = new Moveable(document.body, {
    targets: [target1, target2, target3],
    roundable: true,
});
moveable.on("roundGroupStart", e => {
    console.log(e.targets);
}).on("roundGroup", e => {
  e.events.forEach(ev => {
      ev.target.style.cssText += ev.cssText;
  });
}).on("roundGroupEnd", e => {
    console.log(e);
});

Moveable.Rotatable

Moveable.Rotatable // 目标是否可以旋转。
    Members
        throttleRotate // 旋转时角度(度)节流阀。栗子：moveable.throttleRotate = 1;
        rotationPosition //指定旋转的位置。(默认值是“top”) 栗子：moveable.rotationPosition = "bottom"
        rotatable // 目标是否可以旋转。(默认值:false) 栗子：moveable.rotatable = true;
    Methods
        request
    Events
        rotateStart // 当旋转开始时
        rotateGroupStart // 当组旋转开始时
        rotateGroupEnd // 当组旋转结束时
        rotateGroup // 当组旋转时
        rotateEnd // 旋转开始时
        rotate // 旋转时

// request栗子
// Instantly Request (requestStart - request - requestEnd)
moveable.request("rotatable", { deltaRotate: 10 }, true);

* moveable.request("rotatable", { rotate: 10 }, true);

// requestStart
const requester = moveable.request("rotatable");

// request
requester.request({ deltaRotate: 10 });
requester.request({ deltaRotate: 10 });
requester.request({ deltaRotate: 10 });

requester.request({ rotate: 10 });
requester.request({ rotate: 20 });
requester.request({ rotate: 30 });

// requestEnd
requester.requestEnd();

// 旋转事件
import Moveable from "moveable";

const moveable = new Moveable(document.body, { rotatable: true });
moveable.on("rotateStart", ({ target }) => {
    console.log(target);
});
moveable.on("rotateEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});
moveable.on("rotate", ({ target, transform, dist }) => {
    target.style.transform = transform;
});

// 组
const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    rotatable: true
});
moveable.on("rotateGroupStart", ({ targets }) => {
    console.log("onRotateGroupStart", targets);
});
moveable.on("rotateGroupEnd", ({ targets, isDrag }) => {
    console.log("onRotateGroupEnd", targets, isDrag);
});
moveable.on("rotateGroup", ({ targets, events }) => {
    console.log("onRotateGroup", targets);
    events.forEach(ev => {
        const target = ev.target;
        // ev.drag is a drag event that occurs when the group rotate.
        const left = ev.drag.beforeDist[0];
        const top = ev.drag.beforeDist[1];
        const deg = ev.beforeDist;
    });
});

Moveable.Resizable

Moveable.Resizable // 是否可以增加或减少目标的宽度和高度。(是否可调整大小)
    Members
        throttleResize // 节流阀的宽度，高度时调整大小。如果将throttleResize设置为小于1，则目标器可能会抖动。(默认值:1)
                       // 栗子：moveable.throttleResize = 0;
        resizeFormat // 调整大小函数。(默认：resizeFormat: v => v) 栗子：moveable.resizeFormat = (size: number[]) => ([Math.trunc(size[0]), Math.trunc(size[1])];
        resizable // 是否可以调整大小。(默认：false) 栗子：moveable.resizable = true;
        renderDirections // 设置方向以显示控制框。(默认：["n", "nw", "ne", "s", "se", "sw", "e", "w"]) 栗子：moveable.renderDirections = ["nw", "ne", "sw", "se"];
        keepRatio // 当调整大小或缩放时，保持宽度，高度的比例。(默认：false) 栗子：moveable.keepRatio = true;
    Methods
        request
    Events
        resizeStart // 当调整大小开始时
        resizeGroupStart // 当调整大小开始时(组)
        resizeGroupEnd // 当调整大小结束时(组)
        resizeGroup // 当调整大小时(组)
        resizeEnd // 当调整大小结束时
        resize // 当调整大小时
        beforeResize // 当调整大小时，' beforeResize '在' resize '发生之前被调用。在' beforeResize '中，可以获取和设置调整大小前的预值

// request 栗子
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("resizable", { deltaWidth: 10, deltaHeight: 10 }, true);

// Use Absolute Value
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 }, true);

// requestStart
const requester = moveable.request("resizable");

// request
// Use Relative Value 使用相对值
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });

// Use Absolute Value 使用绝对值
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 110, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 120, offsetHeight: 100 });

// requestEnd
requester.requestEnd();

// 事件栗子
import Moveable from "moveable";

const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resizeStart", ({ target }) => {
    console.log(target);
});
moveable.on("resizeEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});
moveable.on("resize", ({ target, width, height }) => {
    target.style.width = `${e.width}px`;
    target.style.height = `${e.height}px`;
});
moveable.on("beforeResize", ({ setFixedDirection }) => {
    if (shiftKey) {
       setFixedDirection([0, 0]);
    }
});
// 组
const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    resizable: true
});
moveable.on("resizeGroupStart", ({ targets }) => {
    console.log("onResizeGroupStart", targets);
});
moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
    console.log("onResizeGroupEnd", targets, isDrag);
});
moveable.on("resizeGroup", ({ targets, events }) => {
    console.log("onResizeGroup", targets);
    events.forEach(ev => {
        const offset = [
            direction[0] < 0 ? -ev.delta[0] : 0,
            direction[1] < 0 ? -ev.delta[1] : 0,
        ];
        // ev.drag is a drag event that occurs when the group resize.
        const left = offset[0] + ev.drag.beforeDist[0];
        const top = offset[1] + ev.drag.beforeDist[1];
        const width = ev.width;
        const top = ev.top;
    });
});

Moveable.Pinchable

Moveable.Pinchable 
    Members
        pinchable // 目标是否可以缩放，可拖动，可缩放，可旋转(默认值:false) 栗子：moveable.pinchable = true;
    Events
        pinchStart // 当缩放开始时
        pinchGroupStart // 当缩放开始时(组)
        pinchGroupEnd // 当缩放结束时(组)
        pinchGroup // 当缩放时(组)
        pinchEnd // 当缩放结束时
        pinch // 当缩放时

// 事件栗子
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    rotatable: true,
    scalable: true,
    pinchable: true, 
});
moveable.on("pinchStart", ({ target }) => {
    console.log(target);
});
moveable.on("pinchEnd", ({ target }) => {
    console.log(target);
});
moveable.on("pinch", ({ target }) => {
    console.log(target);
});
// 组
const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    pinchable: true
});
moveable.on("pinchGroupStart", ({ targets }) => {
    console.log("onPinchGroupStart", targets);
});
moveable.on("pinchGroupEnd", ({ targets, isDrag }) => {
    console.log("onPinchGroupEnd", targets, isDrag);
});
moveable.on("pinchGroup", ({ targets, events }) => {
    console.log("onPinchGroup", targets);
});

Moveable.OriginDraggable

Moveable.OriginDraggable 
    Members
        originRelative // %可以用来代替绝对px(默认值:true) 栗子：moveable.originRelative = true;
        originDraggable // 是否拖动原点(默认:false) 栗子：moveable.originDraggable = true;
    Methods
        request
    Events
        dragOriginStart // 当拖动启动原点时
        dragOriginEnd // 当拖动结束原点时
        dragOrigin // 当拖动原点时

// request 栗子
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("originDraggable", { deltaX: 10, deltaY: 10 }, true);
// Use Absolute Value
moveable.request("originDraggable", { x: 200, y: 100 }, true);
// Use Transform Value 使用转换值
moveable.request("originDraggable", { deltaOrigin: [10, 0] }, true);
moveable.request("originDraggable", { origin: [100, 0] }, true);
// requestStart
const requester = moveable.request("originDraggable");

// request
// Use Relative Value
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
// Use Absolute Value
moveable.request("originDraggable", { x: 200, y: 100 });
moveable.request("originDraggable", { x: 220, y: 100 });
moveable.request("originDraggable", { x: 240, y: 100 });

// requestEnd
requester.requestEnd();

// 事件栗子
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    originDraggable: true,
});
let translate = [0, 0];
moveable.on("dragOriginStart", e => {
    e.dragStart && e.dragStart.set(translate);
}).on("dragOrigin", e => {
    translate = e.drag.beforeTranslate;
    e.target.style.cssText
        = `transform-origin: ${e.transformOrigin};`
        + `transform: translate(${translate[0]}px, ${translate[1]}px)`;
}).on("dragOriginEnd", e => {
    console.log(e);
});

Moveable.Group

Moveable.Group // 目标组移动。
    Members
        hideChildMoveableDefaultLines // 是否在child moveable中隐藏与目标矩形对应的组的行。(默认：false) 栗子：moveable.hideChildMoveableDefaultLines = true;
        defaultGroupRotate // 设置组的初始旋转。(默认：0) 栗子：moveable.defaultGroupRotate = 40;
        defaultGroupOrigin // 设置组的初始起源。(默认：0) 栗子：moveable.defaultGroupOrigin = "20% 40%";

Moveable.Draggable

Moveable.Draggable // 能够拖动和移动目标。
    Members
        throttleDragRotate // 拖动时x、y角的节流阀。栗子：moveable.throttleDragRotate = 45;
        throttleDrag // 节流x, y时拖动。栗子：moveable.throttleDrag = 1;
        startDragRotate // 启动角度的throttledragrotation的x, y时拖动。
                        // 栗子 45, 135, 225, 315
                        // moveable.throttleDragRotate = 90;
                        // moveable.startDragRotate = 45;
        edgeDraggable // 是否通过拖动边缘线来移动(默认:false) 栗子：moveable.edgeDraggable = true;
        draggable // 是否可以拖动目标。(默认值:false) 栗子：moveable.draggable = true;
    Methods
        request
    Events
        dragStart // 拖动开始时
        dragGroupStart // 拖动开始时 (组)
        dragGroupEnd // 拖动结束时 (组)
        dragGroup // 拖动时 (组)
        dragEnd // 拖动结束时
        drag // 拖动时

// request 栗子
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("draggable", { deltaX: 10, deltaY: 10 }, true);
// Use Absolute Value
moveable.request("draggable", { x: 200, y: 100 }, true);

// requestStart
const requester = moveable.request("draggable");

// request
// Use Relative Value
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
// Use Absolute Value
moveable.request("draggable", { x: 200, y: 100 });
moveable.request("draggable", { x: 220, y: 100 });
moveable.request("draggable", { x: 240, y: 100 });

// requestEnd
requester.requestEnd();

// 事件栗子
import Moveable from "moveable";

const moveable = new Moveable(document.body, { draggable: true });
moveable.on("dragStart", ({ target }) => {
    console.log(target);
});
moveable.on("dragEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});
moveable.on("drag", ({ target, transform }) => {
    target.style.transform = transform;
});
// 组
const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    draggable: true
});
moveable.on("dragGroupStart", ({ targets }) => {
    console.log("onDragGroupStart", targets);
});
moveable.on("dragGroupEnd", ({ targets, isDrag }) => {
    console.log("onDragGroupEnd", targets, isDrag);
});
moveable.on("dragGroup", ({ targets, events }) => {
    console.log("onDragGroup", targets);
    events.forEach(ev => {
         // drag event
         console.log("onDrag left, top", ev.left, ev.top);
         // ev.target!.style.left = `${ev.left}px`;
         // ev.target!.style.top = `${ev.top}px`;
         console.log("onDrag translate", ev.dist);
         ev.target!.style.transform = ev.transform;)
    });
});

Moveable.Clippable

Moveable.Clippable // 是否裁剪目标。
    Members
        dragWithClip // 当拖动目标时，剪辑也会移动。(默认：true) 栗子：moveable.dragWithClip: true,
        defaultClipPath // 如果没有设置clippath，可以设置默认值。(defaultClipPath < style < customClipPath < 拖动clipPath)
                        // 栗子：moveable.defaultClipPath = "inset"        
        customClipPath // 强制使用自定义clipPath。(defaultClipPath < style < customClipPath < 拖动clipPath)
                       // 栗子：moveable.customClipPath = ""
        clipVerticalGuidelines // 在垂直方向上添加夹子指导方针。(默认：[]) 栗子：moveable.clipVerticalGuidelines = [0, 100, 200]
        clipTargetBounds // 剪辑是否与目标绑定。(默认：false) 栗子：moveable.clipTargetBounds = true
        clipSnapThreshold // 耐压值，可以抓拍到剪辑指导方针。(默认：5) 栗子：moveable.clipSnapThreshold = 5
        clipRelative // %可以用来代替绝对px (' rect '不可能)(默认:false) 栗子：moveable.clipRelative = true
        clippable // 是否剪辑目标。(默认值:false) 栗子：moveable.clippable = true
        clipHorizontalGuidelines // 在水平方向上添加夹子指导方针。(默认：[]) 栗子：moveable.clipHorizontalGuidelines = [0, 100, 200]
        clipArea // 设置裁剪区域来拖动剪辑。(默认值:false) 栗子：moveable.clipArea = true
    Events
        clipStart //裁剪开始时
        clipEnd //裁剪结束时
        clip //裁剪时

 // 事件栗子
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

有遗漏或是看不懂的到官网去看吧