引入“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.js
const move = new Moveable(document.body, {
  target: document.querySelector(".root"),
  draggable: true,
})

页面看起来像这样。

好像有什么东西在动。我不能用这个来移动它,所以我将编写代码来移动它。

index.js
const 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.js
const 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.js
const 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.js
const 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

50人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册