Godot 4 Drag-and-Drop Tutorial: Create Interactive Games with Ease

[@Kriinsch]

In the Object script I would add another condition or a seperate condition to check if the body_rev is the same as the body that is left. For me the two "slots" are very close together and the Object left the first slot while in the second slot, so the left function triggered and set the draggable flag to false. So instead of func _on_area_2d_body_exited(body): if body.is_in_group("dropable"): use func _on_area_2d_body_exited(body): if body.is_in_group("dropable") && body_ref == body:

[@MariaAstridMocanu]

Hey in case you have problems and your drag and drop doesnt work -> but the object changes scale: check if you added the 'click' action in the inputmap (located in the project settings tab) -> but you cant move it around because it doesnt detect the click (but it works in the secondary scene) (set the mouse filter to ignore on the color rect in the main scene)

[@MariaAstridMocanu]

Oh yeah, in case you can click through multiple objects when using this script you need to use get_tree().get_root().set_input_as_handled() (Again working with godot has made me lose my mind)

[@Anna-Mashiro]

@@MariaAstridMocanu Hi! Maybe a bit late but I have a simple canvas modulate with a colourrect over it for a shader. I am however unable to click through this (everything works fine if I hide it for a second) where whould I add this so I can click through it?

[@MariaAstridMocanu]

@@Anna-Mashiro that sounds like its catching mouse events. Did you set the mouse filter to ignore on that canvas object? I might be wrong, sorry for the late reply

[@samuelleal4250]

ColorRect can interfere with mouse interactions because it captures input events by default. To ensure that the ColorRect does not interfere with your other game mechanics, you can set its mouse filter to "Ignore". Steps to Set the Mouse Filter of a ColorRect to Ignore 1. Select the `ColorRect` Node: - In the Scene tree, select the `ColorRect` node that you are using as your background. 2. Access the Inspector: - In the Inspector panel, look for the `Mouse` section. 3. Set the Mouse Filter: - Find the `Mouse` section, which contains the `Mouse Filter` property. - Change the `Mouse Filter` property from `Stop` (default) to `Ignore`. Godot Version: 4.2.2

[@syncr0904]

This was EXACTLY what I was looking for! Thanks so much

[@MagicCubeWorld]

This is the best Godot drag and drop tutorial I've seen. Thank you.

[@KuroNekoji]

Easy to follow and understand what is coded and why Very nice, thumbs up!

[@origenydestino13]

Fantastic. Simple and clean, and opening lots of doors for various stuff for interactable interfaces. Thanks a lot!

[@rluis]

Using areas to detect the mouse over is falible... why not use transparent buttons?

[@rcjvet]

I did not implement the same solution as you, but your solution sparked a thought which allowed me to get past a hurdle in my code. Thanks!

[@morpheeze]

If you come here wondering why suddenly opening the project in Godot 4.2 does not appear to do anything check the BG colorrect mouse setting. For some reason that gets flipped. You want it to be Ignore or Control.MOUSE_FILTER_IGNORE in code.

[@soirema]

for anyone else stuck the object and background are two seperate scenes and there is one more that combines them

[@woozyyidk860]

Great tutorial, did exactly what I needed. Thanks! Not sure if I just messed something up, but if anyone else is having issues with the object not snapping into place when released inside the slot, reduce the slots 2D area size. Worked for me.

[@نور-س7ل2ص]

i think we need the global script

[@Landonkeeling11]

im having this issue but I dont understand what you are saying

[@efika1267]

thank you. this helped me fix a problem i had been working on for hours

[@manuelribeiro8136]

Thanks for sharing, could you also post or share the complete code.

[@dobleve_walas]

Very well explained, simple and usefull tutorial. Keep it going!

[@canaldocoalhada9905]

You've saved a lot of work, thank you!

[@kittyseven6777]

Great tutorial, I am definitely liking and subscribing, but does anyone know how to make it so if you have multiple objects you cant just put them in the same square? I tried checking if when it checks for area2d collision it also checks that its not in a group called dropable_item (which is what i put my dragable objects in), but it still didnt work. Would appreciate any help.

[@Mahesh_65629]

Thanks for this awesome tutorial DICODE 🤩🤩 this is very helpful and also thanks for dicode's subscribers for giving colorect problem solution ❤❤

[@RevScarecrow]

Shot in the dark here. I can't get the objects to drop in the zones. I'm using 4.3. The drag works but if I release the mouse it just flies back to where it started. Not sure what's causing it but I'm out of ideas.

[@murraymon]

What if I have multiple objects, like for a puzzle, and some are overlapping, how would I have it only detect one object if it is hovering over where they overlap?

[@kittyseven6777]

yes I would like to know the answer to this too

[@Crisisdarkness]

Oh this is very useful, it is just what I need to learn, but I would like to use this in a 3d approach, but I feel that with this logic I could know how to do it, thanks friend, your channel is very valuable

[@싼데비슷한-j5x]

This is SOOOOOOOO useful. Thanks

[@tobydanieljones]

⚠There's a problem with the logic if the platforms are too close together, and the object can be touching two platforms at the same time. When the object is dragged from the first platform over the second platform, is_inside_dropable = TRUE, but then, if the user drags the object further, leaving the first platform, is_inside_dropable gets set to FALSE. That means, when the object is dropped, it returns to the first platform. Nevertheless, this video taught me a lot, thanks!

[@jornlamb7271]

Yea I noticed this bug too. Would you know how to fix it?

[@tobydanieljones]

@@jornlamb7271 Sorry it took me so long to reply, I was busy with another part of my project. What I've done is set up an array of bodies, appending a body when entered, and removing it from the array when exited. That way, if a body is entered, then a second one, then that body is exited, the first body is still in the array, and you can use that to move to.

[@tobydanieljones]

extends Node2D var draggable = false *#REMOVED* var is_inside_dropable = false *#REMOVED* var body_ref var offset: Vector2 var initialPos: Vector2 var array_of_bodies = [] *#ADDED* # Called when the node enters the scene tree for the first time. func _ready(): pass # Called every frame. 'delta' is the elapsed time since the previous frame. func _process(_delta): if draggable: if Input.is_action_just_pressed("click"): initialPos = global_position offset = get_global_mouse_position() - global_position global.is_dragging = true array_of_bodies.clear() #ADDED to clear array if the original location was added to the array when using tween back to the initialPos if Input.is_action_pressed("click"): global_position = get_global_mouse_position() - offset elif Input.is_action_just_released("click"): global.is_dragging = false var tween = get_tree().create_tween() *#REMOVED* if is_inside_dropable: *#REMOVED* tween.tween_property(self,"position",body_ref.position,0.2).set_ease(Tween.EASE_OUT) if not array_of_bodies.is_empty(): *#ADDED* tween.tween_property(self,"position",array_of_bodies.back().position,0.2).set_ease(Tween.EASE_OUT) *#ADDED* array_of_bodies.clear() *#ADDED* else: tween.tween_property(self,"global_position",initialPos,0.2).set_ease(Tween.EASE_OUT) #NOTE this will add the original body to the array func _on_area_2d_mouse_entered(): if not global.is_dragging: draggable = true scale = Vector2(1.05, 1.05) func _on_area_2d_mouse_exited(): if not global.is_dragging: draggable = false scale = Vector2(1, 1) func _on_area_2d_body_entered(body): if body.is_in_group('dropable'): *#REMOVED* is_inside_dropable = true array_of_bodies.append(body) *#ADDED* body.modulate = Color(Color.REBECCA_PURPLE, 1) *#REMOVED* body_ref = body func _on_area_2d_body_exited(body): if body.is_in_group('dropable'): *#REMOVED* is_inside_dropable = false array_of_bodies.erase(body) *#ADDED* body.modulate = Color(Color.MEDIUM_PURPLE, 0.7)

[@tarunt9153]

@@tobydanieljones Man thanks a lot for the explanation and the code, works flawlessly 🙌

[@user-sq5yj9fx9h]

I put a camera on the object and the object is moving way too fast, how can I control the max speed or the speed in general?

[@leonf8199]

Diesn't the control node have extra methods for dragging? why use node2d?

[@sorenstorm]

Thanks!

[@jaxterity]

most of it worked when I went through it but, if I drag the sprite to a position OFF the boxes and let go, it tweens animation to the very top left of the screen, instead of back to a box position

[@mortiphago]

Great tutorial

[@metinovadilet]

You're fantastic mate

[@DennisRevy]

Thank you so much for this tutorial. I initially tried 16bitDev's tutorial but realized the icon deletes when dropped in non-droppable areas.

[@dicode1q]

Glad it helped

[@luckyadiatma2157]

Is there no github repo for this?

[@sebashtioon_]

There is a slight problem, I can hold the mouse then hover over the dropable, and it snaps to it nicely, but the slots dont show. Do you know how i can fix this?

[@thefufuu3157]

thanks for the tut ... ! is there an easy solution if your item is bigger then 1 slot ? i tried with two slots into two inventory slots it kinda does a thing but not really you maybe got an idea how to challange that ? or anyone else

[@syncr0904]

If the collision shape is the proper size it should activate the body entered function on both. The main thing will probably be to make an array of body_ref to track all currently overlapping bodies. And on release you will probably need some logic to figure out which body to tween to. Which would include ensuring that it isn't hanging off to one side. Hope that helps if I'm not too late

[@vizikey]

Very nicely done.

[@kimberlyknife3200]

mine is not dropping in the same place as the spot :( how do i fix it?

[@valthalin7613]

Great tutorial, thank you! one bug is on quick mouse movement the item is "dropped". Might you have a fix for that? Thank you.

[@me_apps]

I am trying to create a card swipe. Any suggestions?

[@Galoline]

Hey, for some reason whenever i place my object it goes straight down? Any idea what this could be?

[@benkimball9388]

Possibly you used a RigidBody2D and gravity is affecting it?

[@mrussogamedev]

Thanks a lot!

[@annabelleowl9586]

Heya i'm an absolute programming beginner and i managed to get through with a bit of trial and error (mostyl had problems with the autoload, i didn't know what it was) Now i finished both prefabs and on their own they work fine but as soon as I put them into a scene the draggable object becomes unresponsive. Do you know why that could be?

[@Anna-Mashiro]

Hi I am having some issues and I was hoping I could get some help. When I hover my dragable object over the area it does not change colour not does it snap to it when released. I made sure it's a staticbody2d and it's grouped in the group called 'dragable'. Somehow it doesnt regonize it at all. It however does appear as soon as I pick up my dragable object. Any ideas? Thank you so much!

[@PainCrazyClub]

maybe you forgot to connect the signal "$Area2D.body_entered" with "_on_area_2d_body_entered"

[@trovestove6886]

Thank you

[@soirema]

i dont think this is for noobs o.o 2:00 where did you get these signals from ?

[@tobydanieljones]

Click on "object", right click, Attach Script (creates blank script) Click on "Area2D", click "Node" (on the right hand side) to list signals, double click on a signal, the 'object' node is pre-selected, click Connect, it adds the function to the script.

[@kylestan5874]

I'm not quite sure how to make it work for 3D any ideas?

[@Nelcia1]

But you didn’t show the code to actually drag the object

[@soirema]

my object snaps to the center no matter what i do, any tips?

[@soirema]

i didnt assign dropable to the platform! it works great now! TYSM! great code!

[@muerteplay3]

mmmm, i tested but are varius problems to resolve: -if the player move fast, the tween not work correctly -any cases the cursor capture the object but the platforms not showing -the droping any cases not work but literal the platform is in area - if the platforms are very nearest the object cant be moved(inventory problem)

[@googleyoutubechannel8554]

Good lord, this is more code that it would take to do this in vanilla javascript... Godot... what... would you say... you do here?

[@dicode1q]

I don't know vanilla js 🙂

[@brunoamadi1045]

What exactly is initialPos? Tried referencing to it at 3:38 but its showing up as an error!?

[@SirKosm]

It's a variable they created at 5:27 at line 7.

[@u1over]

Dear people, how can i prevent multiple objects placed in one slot?

[@Quaffyson2]

Did you by chance find a fix? If so, slide me the answer, good sir! 🙏

[@u1over]

@@Quaffyson2 Hey! Yes i managed to do it with help of my friend. You make a script for your slots(Areas2d or whatever), there you place var occupied = false. In object script after tween func you wright body_ref.occupied = true, and in on_item_area_body_entered you say if not body_ref.occupied, is inside dropable = true. And you tell body no to be occupied when you drag item out of it. Hope this will help!

[@Quaffyson2]

@@u1over Thank you! You saved me many headaches!

[@Mehmet_Xan]

*Easy

[@scottmurphy6030]

☹️ "promosm"