使い方を知るためにひとまず公式のデモと同じようなものを作ってみます。図形をインタラクトに動かしてみるデモ少し公式と変えて作ったので順番に見ていきます。--></body>.infoはドラッグイベントで移動した距離をリアルタイムで表示させるエリアです。.draggableが実際にドラッグする要素です。css案件時はSassしか使いませんがデモなので直書きです。色分けして見やすいようにしただけなので、CSS自体は適当ですがとりあえず載せときます。currentcolor;}JavaScript今回はES6+で書くのでCDNでなくwebpackでバンドルして使います。interact.jsをインストールまずはyarnもしくはnpmでインストールします。interactjsコード今回はES6+でClassを使って書いてみます。嫌われてがちなjQueryも不要です。//ドラッグの最後の移動値を適用させる。コンテナの端でドラッグまたはサイズ変更の移動が発生した場合、コンテナ(ウィンドウまたはHTMLElement)をスクロールします。Interact();全体はこうなりました。スマホでの2本指ピンチでの拡大縮小機能も追加してみました。以下ポイントだけみていきます。htmlのdata属性は使わない公式のサンプルではhtmlのdata属性を使って位置情報の保存や取得を行っていますが、JSの中で完結できるのでその手法は使いません。生DOMをいじくるのは最小限にしておきたいですね。代わりにメンバ変数を使います。メンバ変数はClass内に閉じ込められるので便利です。要素の数だけx、yの位置情報を保存できるようにオブジェクトを生成します。});}位置情報を計算してcssで動かす最初に書きましたが、interact.jsはイベントを追加してくれるだけです。そのため必要な値を自分で取得して位置情報を計算し、cssでターゲットとなる図形を動かします。event);}draggableイベントのonmoveに指定したdragMoveListenerという関数で「図形をドラッグして動かしている最中」の図形の位置移動を処理します。ここではドラッグしている要素の元の位置情報を変数(this.position)から取り出し、イベントオブジェクトから動いた位置(event.dx、event.dy)を取得して加算することで位置情報を割り出します。割り出した位置情報をCSSのtransformで要素に適用させると位置が動きます。最後に変数(this.position)を更新すれば、onmoveでドラッグを動かしている最中は連続的に位置が更新されて図形がドラッグされた状態になります。位置情報(this.position)を更新これがドラッグイベント発生中に連続的に実行されるって感じですね。ちなみに公式のサンプルと変数や関数名などが少し違いますが、計算式や処理内容はほとんど全く同じです。動かしたいだけなら公式をコピペするのが早いですが、こうやってサンプルを紐解いて仕組みを理解しないと他のものに適用できないのがinteract.jsのやっかいなところです。フレームワークと併用するときなんかはdata属性なんか使わないだろうしコピペだけでは無理ですね。1;}こちらは関数化しましたが、公式のサンプルと計算式は全く同じです。これをonmoveとonend時に使ってあげると位置情報をリアルタイムで表示できます。公式ではonend時だけですがonmoveにもいれてみました。DEMO図形をインタラクトに動かしてみるDEMOPCのマウスでのドラッグ&ドロップはもちろん、スマホでの2本指ピンチでの拡大縮小にも対応しています。(ピンチ機能はPCのトラックパッドには対応していません)さいごにここまででドラッグ&ドロップの簡単な使い方はわかりましたね。