Moveable - マウスでドラッグ/リサイズ/回転を実現 // MOONGIFT Archived

Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。

Moveableの使い方

ドラッグの例。

リサイズの例。これはDOMの大きさだけが変わります。

スケールの変更。こちらは文字の形、大きさも変化しているのが分かります。

回転もできます。

MoveableはDOMのリサイズ、ドラッグ、スケール変更、回転をサポートしています。個別に有効にすることも、複数有効にもできます。Moveableを使うことで、ドロー系機能が手軽に実現できそうです。

MoveableはTypeScript製のオープンソース・ソフトウェア（MIT License）です。