1. Project Setup

Choose your OS:

Before we get started, there are a couple assets that we'll need to create as part of our project setup.

For this how-to, we are using the Blueprint Third Person Template. However, you can use any project you wish.

Steps

  1. In the Content Browser, create three Widget Blueprints called: DragWidget, HealthBar and HUD.

    DragDrop1.png

    In this example, the element that we want to be drag and droppable is our HealthBar widget that will be placed in our HUD. We are going to create and drag a widget called DragWidget in the same shape as our Health Bar rather than dragging the actual Health Bar around.

  2. Right-click in the Content Browser and create a new Blueprint Class of the DragDropOperation class and call it WidgetDrag.

    DragDrop2.png

    This specialized Blueprint Class will allow us to pass through information as part of our drag and drop action.

  3. Open WidgetDrag then create a User Widget variable called WidgetReference and make it Editable and Expose on Spawn.

    DragDrop3a.png

    This will be used to hold the UMG Widget that we want to drag around on screen.

  4. Create another variable called DragOffset of the Vector 2D type that is Editable and Exposed on Spawn.

    DragDrop3b.png

    This will be used to offset the location in which we start dragging and when we drop our widget.

With our project setup done, next we will start working on the HealthBar Widget Blueprint which is the piece of UI that we want to be draggable.