スマホでドラッグ＆ドロップを実装するならInteract.jsは使いやすいのでおすすめ。

今回初めてお仕事として謎解きサイトを作ることになったのですが、その中でイラストを動かすjavascriptで指定の場所と物の組み合わせで３つあえば隠し扉が開く的なギミックを作ることになりました。（昔のRPGで石像とか動かしたみたいに）

canvasとかp5.jsとかそういったものを使おうと思ったのですが、これまでjsはサイト制作で使用するアニメーション程度しか実装経験がなく、納期を考えると今から学習するのでは間に合わない。

そこで簡単に実装できるプラグインがないか調べたところ、intract.jsというプラグインを使用すると割と簡単に実装できたので今回はintract.jsについてまとめてみました。

interact.jsとは？

簡単にドラッグ＆ドロップを実装できる、JavaScriptのプラグインです。

jsの基本的な記述が分かれば、比較的に簡単に導入ができるのでオススメです！

また要素をドラッグ＆ドロップできるだけでなく、指定の位置にドロップされたことを判定できるので当たり判定的なことができます。

今回はこんな感じのものを作ってみました。

See the Pen Untitled by KazukiYoza (@kazukiyoza) on CodePen.

ざっくりとしか触ってないですが、

• 移動範囲の制限
• 当たり判定

は簡単に実装できました！

一般的なコーポレートサイトではあまり使うことはないと思いますが、もしもの時のために覚えておくと何かの役に立つかも？！

参考記事