Moveable 开源项目教程

叶准鑫Natalie

于 2024-08-09 08:01:43 发布

阅读量229

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00531/article/details/141047838

版权

Moveable 开源项目教程

moveableMoveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!项目地址:https://gitcode.com/gh_mirrors/mo/moveable

项目介绍

Moveable 是一个强大的开源项目，它提供了一系列的组件，使得元素可以在网页上进行拖拽、缩放、旋转、扭曲等操作。Moveable 支持多种前端框架，包括 React、Preact、Angular、Svelte、Lit 和 Vue。该项目由 daybrush 开发和维护，拥有超过 9.9k 的 Star 和 608 个 Fork。

项目快速启动

安装

首先，你需要通过 npm 安装 Moveable：

npm install moveable

基本使用

以下是一个简单的示例，展示如何在 HTML 中使用 Moveable：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moveable 示例</title>
    <script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
</head>
<body>
    <div id="target" style="width: 100px; height: 100px; background-color: red;"></div>
    <script>
        const target = document.querySelector("#target");
        const moveable = new Moveable(document.body, {
            target: target,
            draggable: true,
            resizable: true,
            rotatable: true
        });
    </script>
</body>
</html>

应用案例和最佳实践

案例一：图片编辑器

Moveable 可以用于创建一个简单的图片编辑器，允许用户拖拽、缩放和旋转图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片编辑器</title>
    <script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
</head>
<body>
    <img id="image" src="path/to/your/image.jpg" style="width: 200px; height: 200px;">
    <script>
        const image = document.querySelector("#image");
        const moveable = new Moveable(document.body, {
            target: image,
            draggable: true,
            resizable: true,
            rotatable: true
        });
    </script>
</body>
</html>

案例二：多元素操作

Moveable 还支持同时操作多个元素，适用于复杂的用户界面设计：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多元素操作</title>
    <script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
</head>
<body>
    <div id="target1" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;"></div>
    <div id="target2" style="width: 100px; height: 100px; background-color: blue; position: absolute; top: 0; left: 150px;"></div>
    <script>
        const targets = [document.querySelector("#target1"), document.querySelector("#target2")];
        const moveable = new Moveable(document.body, {
            target: targets,
            draggable: true,
            resizable: true,
            rotatable: true
        });
    </script>
</body>
</html>

典型生态项目

Moveable 不仅是一个独立的库，还与其他项目和工具集成，形成了一个丰富的生态系统。以下是一些典型的生态项目：

React-Moveable

React-Moveable 是 Moveable 的 React 版本，提供了与 React 生态系统的无缝集成

moveableMoveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!项目地址:https://gitcode.com/gh_mirrors/mo/moveable

叶准鑫Natalie

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Moveable 开源项目教程

Moveable 开源项目教程 moveableMoveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!项目地址:https://gitcode.com/gh_mirrors/mo/moveable 项目介绍Moveable 是一个强大的开源项目，它提供了一系列...
复制链接

扫一扫