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

  • URLをコピーしました!

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

こんなイメージのやつ。

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

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

目次

interact.jsとは?

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

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

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

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

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

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

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

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

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

参考記事

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

神奈川生まれ沖縄育ちの88年生まれ。WEB制作3年目。
31歳まで舞台俳優を目指して活動していましたが、将来が不安になり未経験からWEB制作業界へ。
現在はWEB制作会社で働いています。たまに演劇経験を活かしてイベントスタッフも。

目次
閉じる