5. Finishing Up

Choose your OS:

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.

Steps

  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.

    UpdateDragDrop3.png

    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.

    UpdateDragDrop4.png

    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.

    UpdateDragDrop5.png

    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.