ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable

ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。

単体で利用でき、React, Preact, Angular, Vueにも対応しています。

サイトのキャプチャ

Moveable -GitHub

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

Moveableの使い方

外部ファイル

当スクリプトを外部ファイルとして記述します。

ドラッグ・リサイズ・スケール変更などのコードは個別に解説されているので、そちらをご覧ください。

サイトのキャプチャ

Features -Moveable

サイトのキャプチャ

Features -Moveable

サイトのキャプチャ

Features -Moveable

サイトのキャプチャ

Features -Moveable

かなり複雑なこともできるようで、詳しいドキュメントも用意されています。

サイトのキャプチャ

Doc -Moveable

sponsors

top of page

©2020 coliss