Godot 4 Tutorial: Click & Drag UI Elements (Part 1 – Global Position)

In this first part of the tutorial, we’ll learn how to make UI elements draggable in Godot 4 using global position. 00:00 Intro 00:16 Title Screen 00:49 Start Project 01:42 Add script 02:00 _input function and InputEvent 02:40 InputEvent usage table 02:53 InputEventMouseButton and InputEventMouseMotion 05:14 pressed event 06:31 button_index usage 08:09 Why is it called button_index? 09:16 Can I use the index number instead? 09:45 The right order if statements can make code more efficient 11:45 How to detect a mouse button release 12:22 Joining multiple if statements 15:51 How to get Rect2 properties of our UI shape 16:54 Using and explaining global_position property 19:08 Detecting if the shape has been clicked by the mouse pointer 21:11 How to toggle if the shape is currently selected or not (being clicked) 22:26 Code to actually drag the shape (InputEventMouseMotion usage) 23:22 Functional but not complete example 24:05 Using a mouse offset value to smooth the drag movement 26:00 Perfectly working example 26:42 Control (UI) nodes vs Node2D (Game Space) nodes 27:37 Extra Info slides You’ll see how to: – Detect mouse clicks on UI elements – Use global_position to move nodes smoothly – Apply drag offsets so dragging feels natural This is Part 1 of a 2-part series. In Part 2, we’ll expand this to drag non UI elements.. more advanced dragging setup. Perfect for beginners who want to understand the math behind click-and-drag before moving on to more complex cases. 🔔 Don’t forget to subscribe so you won’t miss Part 2!