# interactjsをAngularで最短で動かしてみる

2 min read
Table of Contents

環境

Angular: 15
interactjs: 1.10.27

interactjsとは?

https://github.com/taye/interact.js

JavaScriptでドラッグ&ドロップ、リサイズ、マルチタッチジェスチャー(慣性とスナッピング機能付き)を実装できるライブラリ。

色々なデモ

インストール

npm install interactjs
npm 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にした
  • 複数要素に対応
  • ドラッグやリサイズはハンドルを使用する

とかいろいろ、やりたいことは結構実現できるカスタマイズ性の高いライブラリーだった。

Fabric.jsをAngularで最短で動かしてみる

domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。

My avatar

Thanks for reading my blog post! Feel free to check out my other posts or contact me via the social links in the footer.


More Posts

Comments