ドラッグアンドドロップ機能を実装するには、ドロップ領域の VisualElement とドラッグ可能な VisualElement が特定のイベントのコールバックを登録する必要があります。このページでは、これらの VisualElement がイベントを受け取ったときに何が起こるかを説明します。
イベントの詳細については、The Event System のドキュメントを参照してください。
ドロップ領域となる VisualElement は、以下の 5 つのイベントタイプのコールバックを登録する必要があります。
DragEnterEvent は、ユーザーがドラッグ可能なオブジェクトをドラッグする際に、そのポインターが VisualElement に入ったときに送信されます。
ドロップ領域の VisualElement が DragEnterEvent を受け取ると、フィードバックを提供して、その要素、またはその子の 1 つがドロップ操作のターゲットであることをユーザーに知らせる必要があります。
これは、例えば、USS クラスをターゲット要素に追加し、ドラッグされたオブジェクトの “ゴースト” をマウスポインターの下に表示する方法などで行います。
DragLeaveEvent は、ユーザーがドラッグ可能なオブジェクトをドラッグして、ポインターが VisualElement を離れるときに送信されます。
ドロップエリア VisualElement が DragLeaveEvent を受信すると、ドロップのフィードバックの提供を停止する必要があります。
これを行うには、例えば、 ターゲット要素が DragEnterEvent を受け取ったときに追加した USS クラスを排除し、ドラッグしたオブジェクトの “ゴースト” を表示しないようにします。
DragUpdatedEvent は、ユーザーがドラッグ可能なオブジェクトをドラッグする際に、そのポインターが VisualElement に重なるときに送信されます。
ドロップエリア VisualElement が DragUpdatedEvent を受信すると、ドロップのフィードバックを更新する必要があります。
これは、例えば、ドラッグしたオブジェクトの “ゴースト” を移動して、マウスポインターの下に留まるような方法で行えます。
ドロップ領域の VisualElement は DragAndDrop プロパティを確認して DragAndDrop.visualMode プロパティを設定し、ドロップ操作の効果を示します。例えば、ドロップ操作には、新しいオブジェクトの作成、既存のオブジェクトの移動、ドロップ操作の拒否などが可能です。
DragPerformEvent は、ユーザーがドラッグ可能なオブジェクトをドラッグし、VisualElement の上でマウスポインターを離したときに送信されます。これは、VisualElement が DragAndDrop.visualMode を DragAndDropVisualMode.None や DragAndDropVisualMode.Rejected 以外のものに設定して、ドラッグしたオブジェクトが受け入れ可能であることを示す場合にのみ発生します。
ドロップエリア VisualElement が DragPerformEvent を受信する場合、DragAndDrop.objectReferences、DragAndDrop.paths、DragAndDrop.GetGenericData() のいずれかに保存されているドラックされたオブジェクト上で適切なアクションを行う必要があります。
例えば、 ユーザーがオブジェクトをドロップした場所に新しい VisualElement を加える場合があります。
DragExitedEvent は、ユーザーがドラッグ可能なオブジェクトを VisualElement 上にドラッグし、マウスポインターを離すときに送信されます。これは、ドラッグされたオブジェクトを受け入れることができる VisualElement がない場合にのみ発生します。
ドロップエリアの VisualElement が DragExitedEvent を受信すると、すべてのドラッグアンドドロップのフィードバックを削除する必要があります。
Note: there is currently a bug in UI Toolkit that prevents DragExitedEvent from being sent. As a workaround, you can implement the relevant functionality in DragLeaveEvent, which is sent when you stop a drag and drop operation.
VisualElement をドラッグ可能にするには、以下の 3 つのイベントタイプでコールバックを登録する必要があります。
ドラッグ可能な VisualElement が MouseDownEvent を受信する場合、その状態を “ドラッグ可能” に設定する必要があります。
ドラッグ可能な VisualElement が MouseUpEvent を受信する場合、その状態をリセットする必要があります。
ドラッグ可能な VisualElement が MouseMoveEvent を受信し、ドラッグの準備ができたら、以下が必要です。
DragAndDrop に適切なデータを加えます。DragAndDrop.StartDrag() を呼び出します。DragPerformEvent または DragExitedEvent を受信するときに、このフィードバックを除く必要があります。