1. Project Setup

Here we create the assets that we'll need and our DragAndDropOperation Class.


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

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.


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


    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.


    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.


    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.


    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.

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