4. On Drop

Choose your OS:

Here we set up our main HUD Widget Blueprint and override what happens when we perform the OnDrop function.

Steps

  1. Open the HUD Widget Blueprint, then in the Details panel for the Canvas Panel, set its Visibility to Visible.

    DragDrop13.png

    We are doing our drag detection inside the Health Bar widget, however, when we release the Left Mouse Button we want to drop it in our HUD Widget Blueprint. In order for our HUD to receive hit detection, we need to set its Visibility setting to Visible.

  2. From the Palette window, add the Health Bar widget to the graph in your desired location.

    DragDrop14.png

  3. Go to the Graph Mode, then add a OnDrop function override from the My Blueprint panel.

    DragDrop15.png

  4. Inside OnDrop drag off Operation and Cast to WidgetDrag, then Get Widget Reference and Get Drag Offset.

    DragDrop16.png

    We cast here to check which type of operation is being performed as part of the OnDrop function, is it Widget Drag? If so, we get the WidgetReference (which we passed through as the widget being dragged) as well as the DragOffset (or position in which we started the drag from).

  5. Off My Geometry and Pointer Event, use the Absolute to Local and GetScreenSpacePosition nodes and connect as shown.

    DragDrop17.png

    This will tell us the position in 2D space where we released the Left Mouse Button to drop the widget. We will use this minus the DragOffset to determine where we should place the widget when it is dropped.

  6. Subtract the DragOffset from the Return Value of Absolute to Local.

    UpdateDragDrop1.png

  7. Off Widget Reference, add a Remove from Parent followed by Add to Viewport and Set Position in Viewport nodes.

  8. Connect the nodes as shown below and uncheck Remove DPIScale and check the Return Value on the Return Node.

    Click for full view.

    We uncheck Remove DPIScale and check the Return Value checkboxes as we do not need to remove the DPI Scaling and we have handled this function so we return as true. With this script, we first remove the existing Health Bar widget before re-adding it to the screen in the new location relative to our Drag Offset.

Our HUD is set up to handle dropping our dragged widget and it displays our Health Bar. In the next and final step in this tutorial, we set up our Dragged Widget to mimic the shape of our Health Bar as well as instruct our Character Blueprint to add the HUD to the viewport.