環境

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を採用した。