5. Finishing Up

We finish by configuring our drag widget, adding our Health Bar to our Main HUD for display and testing everything out.


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

In this final step, we configure our DragWidget (which is the visual widget we are dragging). We then tell our Character Blueprint to add the HUD Widget Blueprint to the viewport as well as enable the Mouse Cursor so we can see where we are dragging.


  1. Open the DragWidget Widget Blueprint and replace the Canvas Panel with a Size Box with a child Border.

  2. Rename the SizeBox to WidgetSize and set isVariable to true, then check both Width Override and Height Override.


    We are going to set the Width and Height of the Size Box to reflect the size of our Health Bar widget.

  3. For the Border, set the Brush Color to Black with an Alpha of 0.5 for some transparency.


    In our example, we will have a silhouette of our Health Bar as the drag visual while keeping the actual Health Bar in the same location.

  4. On the Graph, drag in Widget Reference then off Event Construct, cast to the HealthBar to get the Desired Size and Break Vector.


    This will give us the size of our Health Bar which we can then set our Size Box to. We could have manually entered the overrides, however, if we change the size of our Health Bar we would then have to also change it here.

  5. Drag in the Widget Size and off is Set Height Override and Set Width Override and connect as shown below.

    Click for full view.

  6. In the Content Browser under Content/ThirdPersonBP/Blueprints, open the ThirdPersonCharacter Blueprint.

  7. Off an Event Begin Play, Create Widget (set to HUD) then Add to Viewport and Get Player Controller to Show Mouse Cursor. DragDrop19.png

  8. Compile, Save then click the Play button to play in the Editor.

End Result

When you play in the Editor, you can Left-click and drag the health bar on screen then drop it in a new location.

This is just an example of the elements you will need to start the Drag and Drop process. Additional checking may be needed to ensure that players do not drag the widget outside of Safe Zones or potentially on top of other widgets.

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