ドラッグアンドドロップでUIのイメージを動かしてみます。決められた範囲内にドロップすると固定されます。
png

動画

動画はこんな感じ。


サンプルの仕様

上の動画は以下のように動作しています。
  • 赤丸のイメージをマウスでドラッグして動かせる
  • 赤丸はドラッグ終了する（マウスの左ボタンを離す）とドラッグ前の位置に戻る
  • ただし、白い四角の領域内で赤丸を離すと、赤丸は白い四角の中央にスナップされる
  • 赤丸はスナップされた後は動かなくなり、ドラッグできなくなる

スクリプト

スクリプトはこんな感じ。



スクリプトの要点

上のスクリプトの要点は以下のような感じ。
  • ３行目： UnityEngine.EventSystems を使用する宣言
  • 10行目： ドラッグとドロップに関する各種インターフェースを使用する宣言
  • 15,21,27,33行目： 各種インターフェースの実装。ドラッグ開始・ドラッグ中・ドラッグ終了時と、ドロップ時の処理
  • 35～38行目：EventSystem.RaycastAll を使って、ドロップ位置のチェック

【ちょいわざ】VisualStudioでのインターフェースの実装

VisualStudio では、下の動画のようにしてインターフェースの実装部を簡単に追加することができます。
インターフェースの宣言箇所で右クリックして、「クイックアクションとリファクタリング」 > 「インターフェイスを実装します」を選びます。
らくちんですね。

まとめ

以上のように、UnityEngine.EventSystems に含まれる各種インターフェースを利用することにより、ドラッグアンドドロップなどの処理を簡単に実装することができます。

参考資料



今回は以上です。感想・質問・要望等、お待ちしております (´▽｀)
（この記事の使用環境： Unity2017.4.1f1 (.NET4.x Equivalent)、Windows10）
follow us in feedly