interactjsをAngularで最短で動かしてみる
環境 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を呼び出す。...