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); });

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