daybrush/moveable, 一个开箱即用的开源可视化拖拽解决方案

徐小夕@趣谈前端

于 2024-09-30 12:37:13 发布

阅读量922

点赞数 21

本文链接：https://blog.csdn.net/KlausLily/article/details/142798047

版权

嗨, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

最近在做多模态搭建系列产品 flowmix 的过程中,发现一款非常有意思的可视化拖拽解决方案 daybrush/moveable, 它可以轻松帮我们实现:

组件拖拽
组件全选 / 多选
组件间拖拽参考线
组件旋转

当然还内置了很多插件可以使用, 这里先上一下开源地址:

github: https://github.com/daybrush/moveable

demo演示

这是 daybrush/moveable 提供的一个相对完整的demo案例, 并且在github上也开源了 , 大家感兴趣可以学习参考一下.

接下来我们来进一步了解这个高达 10k star 的开源拖拽方案.

从 github 上的介绍我们可以看出它具备如下特点:

可拖动: 是指能够拖动和移动目标的能力。
可调整大小: 表示目标的宽度和高度是否可以增加或减少。
可缩放: 表示目标的 x 和 y 是否可以进行变换缩放。
可旋转: 表示目标是否可以旋转。
可扭曲: 表示目标是否可以被扭曲（变形、弯曲）。
可捏合: 表示目标是否可以与可拖动、可调整大小、可缩放、可旋转一起被捏合操作。
可分组: 表示目标是否可以通过可拖动、可调整大小、可缩放、可旋转进行分组移动。
可吸附: 表示是否吸附到参考线。
可拖动源: 表示是否拖动原点。
可裁剪: 表示是否裁剪目标。
**可圆角:**表示是否显示并拖动或双击设置边框半径。
支持 SVG 元素（svg、路径、直线、椭圆、组、矩形等）
支持主流浏览器
支持 3D 变换

如何使用

1.安装依赖

npm i moveable

2.使用

import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    // If the container is null, the position is fixed. (default: parentElement(document.body))
    container: document.body,
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
    // Enabling pinchable lets you use events that
    // can be used in draggable, resizable, scalable, and rotateable.
    pinchable: true, // ["resizable", "scalable", "rotatable"]
    origin: true,
    keepRatio: true,
    // Resize, Scale Events at edges.
    edge: false,
    throttleDrag: 0,
    throttleResize: 0,
    throttleScale: 0,
    throttleRotate: 0,
});
/* draggable */
moveable.on("dragStart", ({ target, clientX, clientY }) => {
    console.log("onDragStart", target);
}).on("drag", ({
    target, transform,
    left, top, right, bottom,
    beforeDelta, beforeDist, delta, dist,
    clientX, clientY,
}) => {
    console.log("onDrag left, top", left, top);
    target!.style.left = `${left}px`;
    target!.style.top = `${top}px`;
    // console.log("onDrag translate", dist);
    // target!.style.transform = transform;
}).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onDragEnd", target, isDrag);
});

/* resizable */
moveable.on("resizeStart", ({ target, clientX, clientY }) => {
    console.log("onResizeStart", target);
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => {
    console.log("onResize", target);
    delta[0] && (target!.style.width = `${width}px`);
    delta[1] && (target!.style.height = `${height}px`);
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onResizeEnd", target, isDrag);
});

/* scalable */
moveable.on("scaleStart", ({ target, clientX, clientY }) => {
    console.log("onScaleStart", target);
}).on("scale", ({
    target, scale, dist, delta, transform, clientX, clientY,
}: OnScale) => {
    console.log("onScale scale", scale);
    target!.style.transform = transform;
}).on("scaleEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onScaleEnd", target, isDrag);
});

/* warpable */
this.matrix = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
];
moveable.on("warpStart", ({ target, clientX, clientY }) => {
    console.log("onWarpStart", target);
}).on("warp", ({
    target,
    clientX,
    clientY,
    delta,
    dist,
    multiply,
    transform,
}) => {
    console.log("onWarp", target);
    // target.style.transform = transform;
    this.matrix = multiply(this.matrix, delta);
    target.style.transform = `matrix3d(${this.matrix.join(",")})`;
}).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onWarpEnd", target, isDrag);
});