moveable官网文档

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

Moveable

Moveable // 可移动是可拖拽的!可调整大小的!可伸缩的!可旋转的!Optionstarget // 目标指定为可移动控制框。栗子：moveable.target = document.querySelector(".target");dragTarget // 要拖动的目标可移动目标。 dragTarget?: SVGElement | HTMLElement | nullrootContainer // 可移动根容器(未转换容器)viewContainer // 在查看器中设置拖拽信息useResizeObserver // 当目标大小发生变化时，是否检测并更新目标大小。栗子：moveable.useResizeObserver = true;zoom //放大一个可移动的元素。栗子：moveable.zoom = 2;transformOrigin // 目标的默认transformOrigin可以提前设置。默认''ables // 添加自定义功能。默认[]className // 指定可移动控件框的className。默认''pinchThreshold // 最小的夹紧距离。默认20pinchOutside // 包含目标的容器是否变为pinch。默认truetriggerAblesSimultaneously // 同时生成可选事件。(如可调整大小，可伸缩)。默认falsecheckInput // 检查该元素是否是用于输入文本或可满足内容的元素，并防止拖动。默认falsecspNonce // 为CSP样式添加nonce属性。默认''translateZ // 设置moveable的translateZ值。默认50hideDefaultLines // 是否隐藏目标矩形对应的行。默认falsestopPropagation  // 是否防止冒泡事件，如鼠标按下，触摸启动等。默认falsepreventClickEventOnDrag // 防止拖动时的单击事件。(mousemove touchmove)。默认truepreventClickDefault // 防止dragStart上的单击事件。(mousedown touchstart)。默认fasleprops // 使用对象格式的道具或自定义道具。默认{}persistData // 首次渲染的数据。默认nulluseAccuratePosition // 是否准确显示可移动控件框的位置因为使用了getBoundingClientRect, css zoom, transform: rotate在container和rootContainer之间不能使用。不支持Group。默认falselinePadding // 通过向行添加填充，可以增加可以单击和拖动的行区域。默认0Memberszoom // 放大一个可移动的元素。栗子：moveable.zoom = 2;useResizeObserver // 当目标大小发生变化时，是否检测并更新目标大小。栗子：moveable.useResizeObserver = true;target // 目标指定为可移动控制框。栗子：moveable.target = document.querySelector(".target");passDragArea // 设置' pointerEvents: none; ' css在dragArea中传递事件。 (默认值: false) 栗子：dragArea: falsepadding // 在目标周围添加填充以增加拖拽面积。栗子：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: falseclassName // 指定可移动控件框的className。栗子：moveable.className = "moveable1";MethodswaitToChangeTarget // 用户更改目标并等待目标更改。updateTarget // 如果宽度，高度，左，和顶部的唯一目标改变，更新可移动的形状。栗子：moveable.updateTarget(type?："Start" | "" | "End");updateSelectorsupdateRect // 如果所有元素的宽度、高度、左侧和顶部发生变化，则更新可移动对象的形状。栗子：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 // 移除可移动对象和事件。EventsrenderStart // 发生在所有事件的第一个开始。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: numberwidth: number // 可移动元素的宽度height: number // 可移动元素的高度offsetWidth: number // 目标的偏移宽度offsetHeight: number // 目标的偏移高度origin: number[] // 绝对变换原点beforeOrigin: number[] // 变换前的绝对变换原点transformOrigin: number[] // 目标变换原点rotation: number // 旋转的绝对值children?: RectInfo[] // 使用一个组，可以得到子moveables的rect信息}PersistRectData: Omit, "children"> & {children?: Array>}PaddingOptions: padding?: PaddingBox // 在目标周围添加填充以增加拖拽面积。PaddingBox // padding值OriginOptions // origin?: booleanOnTransformStartEvent: setTransform: (transform: string | string[], transformIndex?: number) => void // 转换目标的内联样式setTransformIndex: (transformIndex: number) => void // 在transform或last中使用该属性进行索引......麻了麻了，后面的类型定义都自己去看英文文档吧。。

EventEmitter

EventEmitter // 在对象或组件上实现EventEmitter。Methodstrigger // 触发一个事件来调用侦听器。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)MembersverticalGuidelines // 在垂直方向上添加指导方针。(默认值:[]) 栗子：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 = 0snapContainer // 一个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};Eventssnap // 当你拖动或dragControl时，' snap '事件被调用。// 栗子moveable.snappable = truemoveable.on("snap", e => {console.log("onSnap", e);});

Moveable.Warpable

Moveable.Warpable // Warpable表示目标是否可以被扭曲(扭曲，弯曲)。Memberswarpable // 目标是否可以扭曲。(默认值:false) 栗子：moveable.warpable = true;renderDirections // 设置方向以显示控制框。(默认值:["n", "nw", "ne", "s", "se", "sw", "e", "w"])// 栗子：moveable.renderDirections = ["nw", "ne", "sw", "se"];EventswarpStart // 当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)Optionsscrollable // 目标是否可以滚动到滚动容器。默认值:falsescrollContainer // 应用滚动的容器。节点scrollThreshold // 扩大滚动检查区域的范围。默认值:0scrollThrottleTime // 保持拖拽时滚动发生的时间间隔设置为0，表示不发生。默认值:0getScrollPosition // 设置一个函数来获取滚动位置。getScrollPosition?: (e: {scrollContainer: HTMLElement, direction: number[]}) => number[]scrollOptions // 选项滚动拖动EventsscrollGroup // 当拖动光标离开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是否可以缩放变换。MembersthrottleScale // 伸缩对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;MethodsrequestEventsscaleStart // 当缩放开始时调用。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-radiusMembersroundRelative // %可以用来代替绝对px。栗子：moveable.roundRelative: falseroundPadding // 圆形控件位置的填充值。栗子：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;EventsroundStart // 当拖动开始剪辑区域或控件时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 // 目标是否可以旋转。MembersthrottleRotate // 旋转时角度(度)节流阀。栗子：moveable.throttleRotate = 1;rotationPosition //指定旋转的位置。(默认值是“top”) 栗子：moveable.rotationPosition = "bottom"rotatable // 目标是否可以旋转。(默认值:false) 栗子：moveable.rotatable = true;MethodsrequestEventsrotateStart // 当旋转开始时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 // 是否可以增加或减少目标的宽度和高度。(是否可调整大小)MembersthrottleResize // 节流阀的宽度，高度时调整大小。如果将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;MethodsrequestEventsresizeStart // 当调整大小开始时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 Memberspinchable // 目标是否可以缩放，可拖动，可缩放，可旋转(默认值:false) 栗子：moveable.pinchable = true;EventspinchStart // 当缩放开始时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 MembersoriginRelative // %可以用来代替绝对px(默认值:true) 栗子：moveable.originRelative = true;originDraggable // 是否拖动原点(默认:false) 栗子：moveable.originDraggable = true;MethodsrequestEventsdragOriginStart // 当拖动启动原点时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 // 目标组移动。MembershideChildMoveableDefaultLines // 是否在child moveable中隐藏与目标矩形对应的组的行。(默认：false) 栗子：moveable.hideChildMoveableDefaultLines = true;defaultGroupRotate // 设置组的初始旋转。(默认：0) 栗子：moveable.defaultGroupRotate = 40;defaultGroupOrigin // 设置组的初始起源。(默认：0) 栗子：moveable.defaultGroupOrigin = "20% 40%";

Moveable.Draggable

Moveable.Draggable // 能够拖动和移动目标。MembersthrottleDragRotate // 拖动时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;MethodsrequestEventsdragStart // 拖动开始时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 eventconsole.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 // 是否裁剪目标。MembersdragWithClip // 当拖动目标时，剪辑也会移动。(默认：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 = trueclipSnapThreshold // 耐压值，可以抓拍到剪辑指导方针。(默认：5) 栗子：moveable.clipSnapThreshold = 5clipRelative // %可以用来代替绝对px (' rect '不可能)(默认:false) 栗子：moveable.clipRelative = trueclippable // 是否剪辑目标。(默认值:false) 栗子：moveable.clippable = trueclipHorizontalGuidelines // 在水平方向上添加夹子指导方针。(默认：[]) 栗子：moveable.clipHorizontalGuidelines = [0, 100, 200]clipArea // 设置裁剪区域来拖动剪辑。(默认值:false) 栗子：moveable.clipArea = trueEventsclipStart //裁剪开始时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);
});

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