要素のドラッグ移動、回転、拡大などが簡単に実装できるJavaScriptライブラリ「Moveable」の紹介


# はじめに
本記事はページ上の要素のドラッグ移動、回転、拡大縮小などを手軽に実装できるJavaScriptライブラリ、「Moveable」の紹介記事です。
日本語の導入記事があまりなく、「使ってみた」系の記事の数も少ないので導入の手助けになればと思い執筆しています。
初学者のため間違いなどありましたらご指摘いただけますと幸いです。

# Moveableとは
上記でご紹介した通り、要素にさまざまな動きをつけることができるjsライブラリです。
MoveableGithub→https://github.com/daybrush/moveable

# 導入において
導入に関しては[こちら](https://blog.logrocket.com/5-things-you-can-do-with-moveable/)の記事と同じ手順で進めていきます。
またこの記事においては参考記事に
>We’ll use the vanilla JavaScript environment to discuss the features of Moveable.

とあるように、他のライブラリやフレームワークを導入していない状態を前提として進めます。
Moveable自体はVueやReactに対応しており、それぞれのコンポーネントが用意されていますのでご自身の用途に合わせてお使いください。

# 導入の手順
まず今回の導入のためのディレクトリを作りましょう。 
``` ruby: コンソール
mkdir features
```
featuresディレクトリに移動したら、moveableをインストールします。
``` ruby: コンソール
 yarn add moveable
```
公式Githubや参考記事には``npm i moveable``でインストールするようにガイドがありますが、私の場合は``npm i``がなぜか機能しなかったためyarnでインストールしています。

次にhtml,css,jsファイルを作ります。
ファイル名は何でも良いですが、ここでは参考記事に則って命名しています。
``` ruby:　コンソール
touch index.html
touch style.css
touch index.js
```

次に``index.html``の中身を書きます。

``` html: index.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 classの指定が``#root``になっていますが、classなので``.root``になります。
``` css: style.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;
}
```
今の状態でサーバーを起動してページを見てみるとこうなっています。
[![Image from Gyazo](https://i.gyazo.com/d8c15d89ffca3412fe162d50e0dc11ca.png)](https://gyazo.com/d8c15d89ffca3412fe162d50e0dc11ca)

このグレーの四角に色々動きをつけていきます。


# ドラッグでの移動
ドラッグ移動ができるようにindex.jsを書いていきます。

``` javascript: index.js
const move = new Moveable(document.body, {
  target: document.querySelector(".root"),
  draggable: true,
})
```

ページはこうなります。
[![Image from Gyazo](https://i.gyazo.com/a36c2063c669f3dbf71fc6687c888de9.png)](https://gyazo.com/a36c2063c669f3dbf71fc6687c888de9)

何だか動かせそうになりましたね。
これだけだとまだ動かせないので、動かすためのコードを書いていきます。
``` javascript: index.js
const move = new Moveable(document.body, {
  target: document.querySelector(".root"),
  draggable: true,
});
//追記
move.on("drag", ({ target, transform }) => {
  target.style.transform = transform;
});
```
これで四角を動かすことができるようになりました。
[![Image from Gyazo](https://i.gyazo.com/d572c10325ed82cf0626cf6eff59e256.gif)](https://gyazo.com/d572c10325ed82cf0626cf6eff59e256)

# 他の機能をつけてみよう（拡大・縮小、回転)
基本的に他の機能を付け足すには、
1.``機能名: true``を追記
2.昨日の動きを指定するコードを追記

の2stepになります。

拡大・縮小機能は``resizable``という機能を使います。
``` javascript: 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";
});
```
[![Image from Gyazo](https://i.gyazo.com/99564f09808346487affded69b6ab0e7.gif)](https://gyazo.com/99564f09808346487affded69b6ab0e7)

なお、画像の縦横比率を保ったまま拡大縮小したい場合は``keepRatio: true``を追記します。
```javascript: 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";
});
```
[![Image from Gyazo](https://i.gyazo.com/74ea96adf8ea16ab874c09f54505ecb6.gif)](https://gyazo.com/74ea96adf8ea16ab874c09f54505ecb6)

回転機能は``rotatable``という機能を使います。
※本記事で紹介する以外の回転の動きも用意されています。公式Githubよりご確認ください。

``` javascript: 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
});
```
[![Image from Gyazo](https://i.gyazo.com/dc09e35195051253c55370f755826850.gif)](https://gyazo.com/dc09e35195051253c55370f755826850)

# その他
特定の機能を消したい場合は、コードを消さなくても　``true``を``false``にすれば動かなくなります。
本記事では移動、拡大・縮小、回転のみ紹介しましたが、Moveableには他にもさまざまな機能があります。
javascriptだけだとドラッグ移動だけでもマウスの位置を特定して距離を足して、、など組むのが大変ですが、Moveableなら簡単に実装できます。

この記事がお役に立てば幸いです。