看英文文档太累了😖。。。小小的翻译整理一下
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);
});
有遗漏或是看不懂的到官网去看吧