ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
Post on:2019年10月16日
sponsors
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。
単体で利用でき、React, Preact, Angular, Vueにも対応しています。
Moveableの特徴
Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。
-
- Draggable
- ターゲットをドラッグおよび移動する機能
-
- Resizable
- ターゲットの幅と高さを増減する機能
-
- Scalable
- ターゲットのx軸・y軸のスケールを増減する機能
-
- Rotatable
- ターゲットを回転させる機能
-
- Warpable
- ターゲットをワープさせる機能
-
- Pinchable
- ターゲットをドラッグブル・リサイズブル・スケーラブル、ロウテイタブルにピンチする機能
-
- Groupable
- ターゲットをグループで操作する機能
-
- Snappable
- ガイドラインにスナップさせる機能
- SVG要素をサポート
- Webkit Safari (Mac, iOS)をサポート
- 3d Transformをサポート
パッケージ
React, Preact, Angular, Vueコンポーネントのパッケージも用意されています。
Moveableのデモ
デモではMoveableのさまざまな操作を楽しめます。
Moveableの使い方
外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script> |
ドラッグ・リサイズ・スケール変更などのコードは個別に解説されているので、そちらをご覧ください。
かなり複雑なこともできるようで、詳しいドキュメントも用意されています。
sponsors
