3. On Drag Detected

In this step we set up what happens when drag is detected.


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

In this step, we determine what happens when the player is, in fact, dragging the HealthBar around on the screen.


  1. Open the OnDragDetected function, Right-click and add a Create Widget node set to Drag Widget, then Browse to it.


    When drag is detected, we will create our DragWidget (which will hold our drag widget). Before we continue with our OnDragDetected function, we need to pass through the Health Bar widget as a reference when the DragWidget is created.

  2. Open DragWidget and add a User Widget variable called WidgetReference set to Expose on Spawn and Editable.


  3. Compile and close DragWidget, then open the HealthBar Widget Blueprint and the OnDragDetected function again.

  4. Assign Self as the Widget Reference and Promote the Return Value to a variable called Dragged Widget and connect as shown.


    Now when our drag widget is created, it will have a reference to the existing Health Bar widget. We also promote the dummy drag widget to a variable so that we have access to it later and can remove it from display when we choose to drop the widget.

  5. Right-click and create a DragAndDropOperation node set to Widget Drag with Pivot set to Mouse Down.


    Pivot determines where the Drag Widget Visual will appear when being dragged relative to the pointer performing the drag operation.

  6. Add Self as the Widget Reference, DraggedWidget as the Default Drag Visual and Drag Offset as the Drag Offset on the node.

    Click for full view.

    Above we indicated what Widget Blueprint is our reference, what the drag visual should be and provided an offset in which to start dragging. There is an offset pin on the node by default, however, we are using our own in our own calculation to determine the position in which to start dragging when Mouse Button Down is pressed.

The last few things we need to do is to determine what happens when the player releases the Left Mouse Button and performs the OnDrop function. We also need to add the HealthBar Widget to our Main HUD Widget Blueprint and tell that to be displayed before testing everything out.

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