はじめに
本記事はページ上の要素のドラッグ移動、回転、拡大縮小などを手軽に実装できるJavaScriptライブラリ、「Moveable」の紹介記事です。
日本語の導入記事があまりなく、「使ってみた」系の記事の数も少ないので導入の手助けになればと思い執筆しています。
初学者のため間違いなどありましたらご指摘いただけますと幸いです。
Moveableとは
上記でご紹介した通り、要素にさまざまな動きをつけることができるjsライブラリです。
MoveableGithub→https://github.com/daybrush/moveable
導入において
導入に関してはこちらの記事と同じ手順で進めていきます。
またこの記事においては参考記事に
We’ll use the vanilla JavaScript environment to discuss the features of 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の中身を書きます。
<!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になります。
.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を書いていきます。
const move = new Moveable(document.body, {
target: document.querySelector(".root"),
draggable: true,
})
ページはこうなります。
何だか動かせそうになりましたね。
これだけだとまだ動かせないので、動かすためのコードを書いていきます。
const move = new Moveable(document.body, {
target: document.querySelector(".root"),
draggable: true,
});
//追記
move.on("drag", ({ target, transform }) => {
target.style.transform = transform;
});
これで四角を動かすことができるようになりました。
他の機能をつけてみよう（拡大・縮小、回転)
基本的に他の機能を付け足すには、
1.機能名: trueを追記
2.昨日の動きを指定するコードを追記
の2stepになります。
拡大・縮小機能はresizableという機能を使います。
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を追記します。
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よりご確認ください。
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なら簡単に実装できます。
この記事がお役に立てば幸いです。