# interactjsをAngularで最短で動かしてみる
2 min read
Table of Contents
環境
Angular: 15interactjs: 1.10.27interactjsとは?
https://github.com/taye/interact.js
JavaScriptでドラッグ&ドロップ、リサイズ、マルチタッチジェスチャー(慣性とスナッピング機能付き)を実装できるライブラリ。
インストール
npm install interactjsnpm install --save-dev @interactjs/typesでインストール。
実装
template
<div class="draggable">Draggable Element</div>まずテンプレート側でdivを作成する。
component
次に、
@ViewChild('canvasEl') canvasEl: ElementRef | undefined;コンポーネント側でcanvasを取得し、
ngAfterViewInit() { const position = { x: 0, y: 0 } interact('.draggable').draggable({ listeners: { start (event) { console.log(event.type, event.target) }, move (event) { position.x += event.dx position.y += event.dy
event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) }interactを呼び出す。
これで画面表示まで行けた。
後は自由にカスタマイズしていける。
カスタマイズ
- 要素を自由にカスタマイズしたかったので、
translateではなくabsoluteにした - 複数要素に対応
- ドラッグやリサイズはハンドルを使用する
とかいろいろ、やりたいことは結構実現できるカスタマイズ性の高いライブラリーだった。
domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。