概要

Unreal Engine 5 でドラッグ＆ドロップできる UI を作成してみます
UE で用意されている「Detect Drag if Pressed」「On Drag Detected」「CreateDragDropOperation」「On Drop」などのノードを使う事でドラッグ＆ドロップを実装する事ができます

環境

windows 11
Unreal Engine 5.1.1
エディタ言語英語

参考URL

以下の記事を参考させて頂きました。

最小サンプル

まずはドラッグ可能な UI を作る

1. 新規 Widget Blueprint を作成

名前を DraggableIcon とします

2. DraggableIcon をドラッグできるようにする

作成した DraggableIcon を開いて Event Graph を編集します

FUNCTIONS の Override をクリック
出てきたウィンドウから On Mouse Button Down を検索して追加

On Mouse Button Down を開いて以下のようにノードを接続します

再び FUNCTIONS の Override をクリック
出てきたウィンドウから On Drag Detected を検索して追加

On Drag Detected を開いて以下のようにノードを接続します
これだけでドラッグの機能は完成です

3. DraggableIcon の見た目を作成

DraggableIcon の Designer を開きます

左下の Hierarchy に「Canvas Panel」と「Image」を追加
追加した Image を選択して、右側の Details から以下の様に変更する
- Position X と Position Y を 100.0
- Size X と Size Y を 200.0
- Color を青に

4. DraggableIcon を表示する

レベルブループリントから DraggableIcon を表示させます

World に戻りレベルブループリントを開く
以下のようにノードを接続する

5. 実行

Alt + P などから Play をします
青いアイコンが表示され、そのアイコンをドラッグする事ができます

ドロップ可能アイコンを作成

次はドラッグしたアイコンをドロップする場所を作成します

1. 新規 Widget Blueprint を作成

名前を DroppableIcon とします

2. DroppableIcon にドロップできるようにする

作成した DroppableIcon を開いて Event Graph を編集します

FUNCTIONS の Override をクリック
出てきたウィンドウから On Drop を検索して追加

On Drop を開いて以下のようにノードを接続します
ここでは単にドロップされたら文字を表示するようにします

Return Node の Return Value を True にします。ここが False のままだとドロップした場合も DraggableIcon で Event On Drag Cancelled が呼ばれてしまいます

3. DroppableIcon の見た目を作成

DroppableIcon の Designer を開きます
見た目の作成は DraggableIcon と同じで、色だけ青ではなくピンクにします

4. DraggableIcon と DroppableIcon を同時に表示する

新規 Widget Blueprint を作成
Designer を開く
左下の Hierarchy に「Grid Panel」を追加
- Column Fill を２つ追加 (Index[0] = 0.5, Index[1] = 0.5)
- Row Fill を１つ追加 (Index[0] = 1.0)
「Grid Panel」に「Named Slot」を２つ追加
- 片方の「Named Slot」の Slot(Grid Slot) の Column を 1 に
それぞれの「Named Slot」に「DraggableIcon」と「DroppableIcon」を追加

レベルブループリントから表示させる Widget を変更する

5. 実行

Alt + P などから Play をします
青アイコンをピンクアイコンへドラッグ＆ドロップすると Hello の文字が表示されます

発展

ドラッグ元からドロップ先へ情報を伝える

Create Drag & Drop Operationノードを使う事でドラッグ元からドロップ先へ情報を伝える事が出来ます。

1. DraggableIcon の Event Graph を編集

Create Drag & Drop Operationノードの Tag 文字を変更します

Class ... Drag Drop Operation を継承したクラスを自身で作成している場合は、ここから選択出来る
Tag ... Drop先へ文字列を渡せる
Payload ... Drop先へ UObject を渡せる
Default Drag Visual ... ドラッグ中の見た目
Pivot ... ドラッグ中のUIの位置を調整
Offset ... ドラッグ中のUIの位置を調整

2. DroppableIcon の Event Graph を編集

On Drop を以下のように変更します

On Drop の Operation ピンから Drag & Drop Operation ノードの内容を取得する事ができます。

3. 実行

これで実行すると DraggableIcon の Create Drag & Drop Operation で設定した Tag 文字が表示されるようになります

その他のドラッグノード

On Drag Cancelled ... ドラッグしたけどドロップしなかった場合に呼ばれる
On Drag Enter ... ドラッグしたアイコンが自身のUIに重なった瞬間に呼ばれる
On Drag Leave ... ドラッグしたアイコンが自身のUIから離れた瞬間に呼ばれる
On Drag Over ... ドラッグしたアイコンが自身のUIに重なっている間呼ばれる

ドラッグ＆ドロップでアイコンを移動

こちらのブログ記事にとても分かりやすくまとまっています

ドラッグ開始したらアイコンを消す
ドラッグキャンセルしたらアイコンを戻す
ドラッグ元から CreateDrag & DropOperationノードの Payload でドロップ先にアイコン(UObject) を渡す
On Drop の Operation ピンから上記のアイコン(UObject)を受け取りドロップ先へ追加

ドラッグ中のアイコンを半透明に

こちらのブログ記事にとても分かりやすくまとまっています
DragDropOperation を継承したクラスの利用方法についてもまとまっています