4. On Drop

In this step, we configure what happens when the player drops the dragged widget.


Set to docs as the page has been combined into a single page.

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


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


    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.


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


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


    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.


    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.


  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.

Select Skin

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback