Welcome to this godot drag and drop tutorial. So looking to use godot to drag and drop ui, items, maybe this is just part of your game play. Drag and dropping of sprites and other game assets in your godot projects can be a very useful mechanic to know how to use. Luckily in godot it is very simple and easy to get the basics of a godot drag control going.

For this tutorial we going to make godot object follow the mouse. So you can easily use this for your pc games. However for your mobile and android games you can also very easily use this. Luckily godot does it’s best to seamlessly allow mouse input and mobile touch input to work the same way. However since we will be using lower level events to make our drag and drop work, I will show you how we can make this compatible for pc mouse input and mobile touch input.

Setup godot drag and drop tutorial project

Let’s start off by just creating our project. So open up a new godot window and create a project called godot drag and drop tutorial.

Now we want to setup a few simply things. Such as a sprite, a kinematicbody2d. You could also use a staticbody2d as well if you wanted, doesn’t really matter. If you want physics to be applied to your object after you have dragged it why not experiment a rigidbody2d which will have physics applied to it.

Here is the nodes you want to add to your project to get everything to work.

So here is the steps to follow to get this setup.

Add a node2d to your scene, by right clicking in the Scene tab. Then click on the node2d node and right click and add a KinematicBody2D node. Then under the KinematicBody2D node go add a Sprite and a CollisionShape2D. For our sprite I just used the default godot sprite which comes with every new project. You can assign it by click on the Sprite node and then dragging the image into the texture slot like this.

Next we need to make sure we have a collisionshape2d rectangle setup. So click on the collisionshape2d and on the right hand side click on shape and choose rectangle shape. Like this:

Now just resize your rectangle shape until you have something that looks like this in your scene.

Here comes the important part to make this whole thing work. Without this you will be pulling your hair out so big NB on this step.

Make the object pickable

So for us to be able to pick up events from our sprite like click or touch events we will need to make our object pickable. To make it pickable click on the kinematicbody2d node and check this box on the right hand side.

That is now the setup of the project. Once you are at this point we need to start adding a script to help us manage the dragging state in our project.

Godot drag and drop script

To keep our script really simple we are going to use signals. If you don’t know what godot signals are. Let me briefly explain. Signals use the observer design pattern. Which allows objects within godot to listen for a signal. These signals can be attached to any of your scripts. Other objects in godot have default signals. We will be using our own custom signal and bind it in our script. Don’t worry it will be very simple, also great thing about this is. If you have been struggling to understand signals up until now. Then this example will also help clear that up for you.

So let’s create our script. Right click in the filesystem tab and create a new gd script called drag and drop.

Open up that script and copy and paste this into your script editor.

extends KinematicBody2D var dragging = false signal dragsignal; func _ready(): connect("dragsignal",self,"_set_drag_pc") func _process(delta): if dragging: var mousepos = get_viewport().get_mouse_position() self.position = Vector2(mousepos.x, mousepos.y) func _set_drag_pc(): dragging=!dragging func _on_KinematicBody2D_input_event(viewport, event, shape_idx): if event is InputEventMouseButton: if event.button_index == BUTTON_LEFT and event.pressed: emit_signal("dragsignal") elif event.button_index == BUTTON_LEFT and !event.pressed: emit_signal("dragsignal") elif event is InputEventScreenTouch: if event.pressed and event.get_index() == 0: self.position = event.get_position()

So for our mobile portion we add a dragsignal. This signal will be called when we have a button left click on and object. All it will do is bind to a function which will flip the dragging flag. If dragging we move our object to the position, if not then we stop moving it. Then for the mobile portion we use event based positioning. So if a touch event happens and its the first index of the count then we will follow that. As you know on mobile you could have multi touch. So for that purpose we have the event.get_index method to help us know which touch we must respect. So to make this all work you just need to make sure you have attached your script to your kinematicbody2d like this.

Also you must attach the input event node signal. By going over to this tab.

Then double clicking in input_event and then attaching that event like this.

Then finally clicking on connect. Now test this out and you should have something which works like this.

That’s how simple it can be to setup a drag and drop in godot. You can now expand this by having snapping to grid. You could have a ui drag and drop function which allows you to drop sprites or game objects in a certain area in your ui. Possibilities are endless.

Frequently asked questions

Can you make godot use drag and drop for mobile and pc? Yes you can with some magic on the input event types and structuring your code you can easily achieve this. Just make sure to handle mobile slightly differently because it can have multiple touch points.

Final words

That is it for this godot drag and drop tutorial. If you liked it please consider sharing it on social media and subscribing to my youtube channel here:https://www.youtube.com/channel/UC1i4hf14VYxV14h6MsPX0Yw?sub_confirmation=1

If you want to support me and my content please check out my skillshare course here:

https://skl.sh/2YhzEfe

Here are also some other tutorials you might be interested in: