引入“Moveable”，一个JavaScript库，可以让你轻松实现元素的拖动、旋转、放大等
本文是对“Moveable”的介绍，这是一个 JavaScript 库，可以让您轻松实现页面上元素的拖动、旋转、缩放等。日语的介绍文章不多，“我试过用”的文章也很少，所以写下这篇，希望对介绍有所帮助。我是初学者，如有错误请指教。
什么是可移动的上面介绍过，它是一个js库，可以让你给元素添加各种动作。可移动的Github→
在介绍中关于介绍按照与文章中相同的步骤进行操作。另外，在这篇文章中，参考文章
我们将使用 vanilla JavaScript 环境来讨论 Moveable 的特性。
如前所述，我们将假设没有安装其他库或框架。Moveable 本身支持 Vue 和 React，每个组件都准备好了，所以请根据你的用途使用它。
安装程序首先，让我们为此安装创建一个目录。
安慰mkdir features进入 features 目录后，安装 moveable。
安慰yarn add moveable官方 Github 和参考文章有使用 npm i moveable 安装的指南，但在我的情况下，npm i 由于某种原因不起作用，所以我使用 yarn 安装它。
接下来，创建 html、css 和 js 文件。文件名可以是任何东西，但这里是根据参考文章命名的。
安慰touch index.html touch style.css touch index.js接下来，写入index.html的内容。
索引.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- cssを読み込む --> <link rel="stylesheet" href="style.css"> <title>Features</title> </head> <body> <div id="title"> <h1>Things you can do in Moveable</h1> </div> <div class="container"> <div class="root"></div> </div> <!--jsファイルを読み込む--> <script type="module" src="index.js "></script> <!--moveableを読み込む--> <script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script> </body> </html>编写 style.css。*在参考文章中，根类指定为#root，但既然是类，那就是.root。
样式.css.container { display: flex; align-items: center; justify-content: center; min-height: 50vh; margin: 0; } #title { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align: center; } .root { background-color: #DDD; width: 200px; height: 200px; }以当前状态启动服务器并查看页面如下所示。
我将为这个灰色方块添加各种动作。
通过拖动移动我们将编写 index.js 以便您可以拖动和移动。
index.jsconst move = new Moveable(document.body, { target: document.querySelector(".root"), draggable: true, })页面看起来像这样。
好像有什么东西在动。我不能用这个来移动它，所以我将编写代码来移动它。
index.jsconst move = new Moveable(document.body, { target: document.querySelector(".root"), draggable: true, }); //追記 move.on("drag", ({ target, transform }) => { target.style.transform = transform; });现在您可以移动矩形。
让我们添加其他功能（放大/缩小、旋转）基本上是添加其他功能，1.添加機能名: true2.添加代码指定昨天的运动
变成2step。
放大/缩小功能使用resizable 功能。
index.jsconst move = new Moveable(document.body, { target: document.querySelector(".root"), draggable: true, resizable: true, //追記 }); move.on("drag", ({ target, transform }) => { target.style.transform = transform; }); //追記 move.on("resize", ({ target, width, height }) => { target.style.width = width + "px"; target.style.height = height + "px"; });如果要在保持图像纵横比的同时缩放图像，请添加keepRatio: true。
index.jsconst move = new Moveable(document.body, { target: document.querySelector(".root"), draggable: true, resizable: true, keepRatio: true,//追記 }); move.on("drag", ({ target, transform }) => { target.style.transform = transform; }); move.on("resize", ({ target, width, height }) => { target.style.width = width + "px"; target.style.height = height + "px"; });旋转函数使用函数rotatable。* 本文介绍的旋转运动以外的旋转运动也可用。请从官方 Github 中查看。
index.jsconst move = new Moveable(document.body, { target: document.querySelector(".root"), draggable: true, resizable: true, keepRatio: true, rotatable: true //追記 }); move.on("drag", ({ target, transform }) => { target.style.transform = transform; }); move.on("resize", ({ target, width, height }) => { target.style.width = width + "px"; target.style.height = height + "px"; }); //追記 move.on("rotate", ({ target, transform }) => { target.style.transform = transform });其他如果要关闭特定功能，可以将true更改为false，无需删除代码。在本文中，我们只介绍了移动、缩放和旋转，但 Moveable 还有很多其他功能。仅使用javascript，很难仅通过拖动和移动来指定鼠标的位置和添加距离，但是使用Moveable则很容易实现。
我希望你觉得这篇文章有帮助。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308628372.html