Smooth Drag N Drop: Godot Guide

[@june_rain_video_game_company]

Dude. You are a genius. Don't ever stop making godot videos. The godot community needs people like you.

[@BramwellWilliams]

You're too kind :') I've been really loving making these videos

[@Zelienter]

@@BramwellWilliams hes just honest

[@janthoma7262]

This is easily one of the best tutorial videos I have ever seen (not just for Godot). It is so clear, to the point and easy to comprehend. Not a single second is wasted. Love it!

[@nguyenyenchi4201]

Thank you so much for the tutorial! As a beginner developer, I have minimal resources with godot tutorials, but your channel has been a life savior! :3

[@erdemozverenn]

This is the best drag n drop tutorial and even with this lerp and zone functionality we can make a smooth looking chest and inventory systems too! Thank you for sharing!

[@BramwellWilliams]

super stoked to hear it thanks!

[@BenjaminWheeler0510]

I have to watch this at 0.5x speed, but you are very thorough regardless! Thanks!

[@samownsyou123]

This video woke my father up from his coma, great job man!

[@PondaYT]

Incase anyone ran into the problem I was having where godot is throwing an error about "Invalid operands Vector2 and Int

[@templaraiur5767]

I just googled "godot drag and drop" and find this video and it is very useful,. Thanks for sharing!

[@BramwellWilliams]

Thanks! really good to hear my search engine optimization isn't awful :')

[@galo4788]

genius ideas tbh, i see a lot of potential on them

[@BramwellWilliams]

Thankyou Galo! You're very kind c:

[@ProBadSing]

I usually watch tutorial videos on x1.75 to avoid details I don't need, but that was not the case here. Great stuff!

[@kunai9809]

Was breaking my head trying to remember the "lerp_angle()" func. Couldn't find it no matter what I searched. Finally remembered I heard it in this vid. Thanks. Very helpful!

[@alexzeitler9416]

Thanks for the tutorial man. Very well-thought-out and easy to follow. I really like how you walk through each bit of code and talk about what each part does logically. I've watched a ton of Godot tutorials as a beginner and yours have been the best I've seen. Keep it up, I know the community will be grateful for everything you put out!!

[@BramwellWilliams]

Thankyou so much Alex! I'm super stoked my approach is helpful - l will c:

[@tiagogamer2540]

This is so much better than the 5-script-monstrocity of a drag and drop system I'd made in unity. Much thanks.

[@katdointhat]

Incredible tutorial and exactly what I was looking for. Thank you so much for filming this.

[@dantheman52420]

Love this guide! A couple small things I did differently when I implemented it: In _input() for deselecting the drag-and-drop object, the same "click" event can be reused by checking if it was just released: if Input.is_action_just_released("click"): selected = false And for the distance calculation, one tip I've seen a lot to save a square root operation is to just compare the squared distance, since the comparison x < y implies x^2 < y^2. There are cases not to do this, if you eventually need exact distance for example or if the distances are so large that the squares could overflow the bounds of their unit. Of course this is just a tiny perf improvement, and if you spent years you could shave more and more microseconds off of every computation, but it's a small habit I'm using to write more optimal code.

[@ximipa1-32-noumisyifanabil3]

hey there, sorry to bother you but can you help me a bit? so i ran into an error that says "invalid get index "0" on base array" in 5:01 line 9, by any chance if you know what to do about it can you reply to this, it'll be a hugeee help for me, also thank you btw

[@Jasonsumm]

I was literally looking for something like this today! Thanks!

[@BramwellWilliams]

Happy to be of service c:

[@kalidelossantos3735]

great, simple tutorial. had to adapt very minor things to godot 4 but the whole tutorial works really well. thanks!

[@MichaelZesty]

Whoa, nice and straight to the point. a legend

[@joshuasamuels2143]

This is the best tutorial video I've ever watched! Good on dude!

[@BramwellWilliams]

Thankyou Joshua that's incredibly kind c:

[@vatan2578]

You are a good person. I wish you and your loved ones health and happiness.

[@johnnyGwaping]

I was researching on where should I start my game dev journey, because of this vid I am convinced I should use GodotEngine. With few lines of codes you achieved a lot. Thanks for the tutorial mate.

[@BramwellWilliams]

thanks - I'm really glad to hear it and great choice! being able to use python like scripts makes lots of difficult problems a breeze and the public support for tutorials has been really great the last couple years c:

[@NerdParker]

Hear hear, you are a great Godot Guide. First video of yours I've stumbled across, subscribed, and informed. Thank you so much!

[@xAshesxElitex]

Just a comment for feedback: You are very clear and well-spoken when explaining what to do, but for me as a noob, I was quickly zoned out and overwhelmed by the flow of information (not that noobs are necessarily your target audience.) Great video! Just a lil over my head :P

[@BramwellWilliams]

Really appreciated feedback! That is something I worry about, I certainly do move quickly within my videos and I think the main merit of my videos are the small tips that fill out existing knowledge - do you think written supplements that are a lot more fleshed out like blog posts would be helpful? Or slowing down the pace of the videos?

[@xAshesxElitex]

@@BramwellWilliams I'm more attuned to learning by watching/doing, not at by reading therefore I couldn't really speak to that. I understand that those with a good base will really get value from your videos! As much as it was over my head I could really appreciate the clarity of the information. It's just that from a noob perspective the vast majority of it was new information, whereas an intermediate viewer would already have much of that knowledge. I think this video and your style has no need for adjustment, but only if perhaps you wish to make videos for newer learners then I'd advise a slower output of information per second :-P Hope this helps.

[@BramwellWilliams]

That's greatly appreciated and I will certainly bear that in mind, thankyou :)

[@CarbsCode]

Another great job Bram! This is super neat and could come in handy for a bunch of applications! :D

[@BramwellWilliams]

Thanks Carbs! I'm really happy with this one c:

[@sujoysinha]

Man I was looking for this method. Thank you. 🎉😮

[@cyzaine]

This was amazingly useful, well paced and well explained for an intermediate Godot user. Much thanks!

[@itmeurdad]

Friend, this is a banger.

[@kasparsfolkmanis]

Very clear and useful, thank you. Just want to say that this will not work if a Node2D is a child of a Control node. In that case you can use buttons and use the button_down and button_up signals to pick and release the button itself.

[@markpaterson2260]

This is the first video of yours that I've found... it's gonna be mega helpful for me and my project, thank you so much.... but I'm gonna be sad when I watch other videos and don't see blanchealmond :(

[@BramwellWilliams]

Thanks! Haha, everyone needs more Blanchealmond Mark :')

[@darycsan2082]

this is the tutorial that i ever want

[@BramwellWilliams]

I'm glad to hear it c:

[@RyanScottForReal]

Hey great tutorial and thanks for the look at the internal code. Your stuff keeps getting better.

[@BramwellWilliams]

Thanks Ryan, hoping to do more behind the scenes stuff that was very illuminating for me c:

[@ViniCavin]

Awesome guide, Bramwell! Thank you for that :)

[@BramwellWilliams]

Thankyou so much! Happy to provide c:

[@ansel569]

Great tutorial- makes a lot of sense. My question is how can I impliment a system where items can only be dragged into un-occupied slots? I'm having trouble implementing this.

[@KingOfFoolz]

Did you ever find a solution to this?

[@curlyboyoli6004]

I know this is an old tutorial, but did anyone find a way to ensure that multiple draggable items do not all become merged together when stacked on top of eachother? Essentially, a means of prioritizing the item on top?

[@capuchinosofia4771]

This is so cool! I'm totally subscribing :D Any idea how to make it so the object is grabbed from the point where the user clicks it, BUT without snapping to the center of the object? Because if the user is still dragging the object but slowly/or is still, the object shakes/does a barrel roll when the object´s center reaches the mouse pointer.

[@AidenOcelot]

Thank you man! This was a very helpful tutorial! I had to do a bit of finagling to make it work for my game, but it's all thanks to you!

[@BramwellWilliams]

Really glad I could help! c:

[@ferdikadatu687]

thanks, your tutorial and explanation is easy to understand.currently i using defold engine than godot because it's have easy ui. looks like i can apply your tutorial in defold engine to.

[@Serebriakov9]

Wow! Great tutorial!

[@mesolagic]

Thanks man this tutorial was really well done! Also, very interesting game concept you have there. Is the console cleaner game something you plan to release as a browser game or on steam? Cheers!

[@BramwellWilliams]

Thankyou! In my head I see the game as a desktop and mobile release although making it playable in browser is a great idea c:

[@AlfredBaudischCreations]

Did you end up releasing this electrician game? Last week Electrician Simulator was launched on Steam and it seems to be selling quite well - it's very similar (or identical, but in 3D) as to what you were doing here!

[@FirstNameLastName-xl6hj]

What if you have multiple items in a list that can be dragged into multiple possible slots, how do we arrange the nodes? say when dragging items from an inventory to equipment slots

[@Poopiroopi]

what I done is just create seperate input events, and seperate selected variables, distance variables and if distance2 < shortest_dist...I'm sure there is more of an easier way to do this but that worked for me. One thing though is that it loses its placement to go back to the node so it's just draggable and doesn't go back to either node

[@ximipa1-32-noumisyifanabil3]

Hey there! Tysm for your tutorial it really helps a lot! but somehow when i try to use the code, i run into an error in 5:01 line 9, the error says "invalid get index "0" on base: array" im super confused on how to solve this. anyone know how to fix it?

[@the_first_hunter]

Hey I upvoted your work on reddit! Good job man

[@BramwellWilliams]

Cheers! the Reddit karma fuels me xD

[@the_first_hunter]

:# good luck man

[@the_first_hunter]

Wait a minute I took a look into your channel, Dude all of your shader tutorials are in my reddit saved posts xD

[@really_damon]

Great tutorial! How would I adjust the code so the sprite only stays in the selected area after a player drags it within the shortest distance? Right now the sprite snaps to the closest area on game load.

[@5minutemovies977]

I hate how you make useful videos full of tips and tricks. This makes me feel bad for not making anything slightly significant with Godot x)

[@BramwellWilliams]

Don't put yourself down! It took me years to work most of this stuff out - I think a huge part of game development is working on little projects, the skills you learn from those are integral to becoming proficient c:

[@Crisisdarkness]

Estimated Bramwell, I hope you come back, to continue making more content, I have missed you

[@MattFGA]

Nice video man, but when I try to instance multiple draggables into a scene they all clump together, and Im not being able to fix it. Can someone help me?

[@mopifish4912]

Simple and effective solution, thanks :)

[@IsabellsHelpfulLessons-m1y]

At 2:53 into the video, I received an error message. BUTTON_LEFT needs to be MOUSE_BUTTON_LEFT in the current version of Godot.

[@aqwszx2]

beautiful tutorial, very useful

[@Lui-po8jh]

thanks, exactly what i needed

[@jesustzinon]

Just find your channel , cool video, i was looking something like this to make a puzzle game i will subscribe!

[@BramwellWilliams]

Thankyou! I'm really glad I could help c:

[@moritzbinnewei1347]

Have you an idea how to do it if you have multiple things that you want to drag around and check if the correct one is on top of the correct circle in that example, because im stuck with it.

[@syedrizvi6408]

Fantastic tutorial. You have covered some flaws, which I experienced earlier with different approach. Do you have a tutorial on random number generator? Thanks for help

[@BramwellWilliams]

thanks! I don't but random number generation is fairly straightforward, from any script after you've used the randomize() function I just use randi() % range and you will get a pseudo random int between 0 and the number you modulus -1. you can also use noise which I did lightly cover in my juicy screenshake video :)

[@sailorjune2121]

i know this is an old video but i'm trying to follow along, at 2:30, my code is identical but when i click on the icon, it jumps away from my mouse rather than picking it up directly, anyone have any advice?

[@Scribbzz]

I'm no expert, but I played around with the values and instead of 25 I put in 60 : global_position = lerp(global_position, get_global_mouse_position(), 60 * delta) Hope this helps!

[@dryerflyer]

Why not use a second Area2d to represent the drop zones, and then handle input on collision? I dissected your code forwards and backwards and learned a lot, thanks.

[@javvvv8120]

Hi! Thank you so much for the vid this helped a lot! However, how do i revert an area2d to its original position once i released my left click button or it entered the wrong area2d? Just like in your tools project.

[@autumn20000]

I did the exact same thing until at 4:29 my work mess up

[@lionleobow]

I know this is an old video, being new to godot this just let me rewrite 3 functions and 40 lines of code that broke my game into simply adding a lerp to my result of the movement function, then from there I was able to make a custom lerp function to simulate weight, friction and strength of the object with export variables!

[@khushraswant2852]

I have one doubt, in the earlier part of the video you are using is_action_just_pressed() and you are using _input(event) for detecting when the user stops clicking (to drag it). Cant we use is_action_pressed() which wont need _input(event) as this function only return true when holding the desired key?

[@kpackama8985]

Very reasonable tutorial

[@qqun]

Great tutorial! I have a question, why didn't you use 'if event.is_action_released("click"):' at 2:51?

[@BramwellWilliams]

naivety! very good shout I'll bear that in mind going forwards thankyou :')

[@ClassicMushroom]

Hey, so I've been working on my game and really needed this. I tried the code for drag n drop and while it did work, first my sprite went far to east south. I had this problem with the code I made aswell

[@syedrizvi6408]

Did you find a solution?

[@Levirules]

to the _on_Area2d_inout_event function, I added print("Clicked"), and the output window outputs "Clicked" twice, indicating that this is processing twice despite is_action_just_pressed being used. The print call is not used anywhere else in the project. Why is this executing twice?

[@Kaellrelth]

Help how do I move more than one sprite with that code? :(

[@borjadetorres7747]

Great tut! But godot is giving a me this error "invalid set index '0' (on base 'array')". Any idea why? I have checked the code and everything seems identical.

[@BramwellWilliams]

Hey! That sounds like when it tries to get the first item in the list of rest zones there's nothing there. Sounds quite possible there was a typo in the group name that got added at 3:54 ? Alternatively it would fail to find the rest zones if you haven't added them to a scene along with the dropable object. Hope this helps :)

[@borjadetorres7747]

@@BramwellWilliams I've checked and theres no typo. I don't understand. If it's not much to ask, can I send you the file?

[@BramwellWilliams]

Sure, you could link to a gist here and I'll have a peruse Also I have a link to my GitHub in the description if you wanted to download and fiddle with a working version of the project

[@borjadetorres7747]

@@BramwellWilliams I've uploaded into gofile gofile.io/d/c5rNGm EDIT: Thanks a lot by the way

[@BramwellWilliams]

@@borjadetorres7747 no worries and I got it working! So the error you described was from running the drag drop scene which crashes as there are no rest zones it can see which makes sense, you can run the test scene using f6 when it's active or updating your project settings to have test be the main scene If you run your test scene it will complain it can't find the select and deselect methods because of the underscores, removing those underscores or adding underscores to all the select and deselect calls will make the test scene work c:

[@saluk7419]

Where is the console repair game? Looks fun!

[@kritantacrixus]

How to have multiple draggables? lets say i want to put 10 individual sprites? :(

[@muerteplay3]

yep , this is the way

[@canaldosoninho]

I really want to play this game

[@BramwellWilliams]

Thanks! It's being a really fun project so I would expect something playable and more videos in the not too distant future c:

[@ernestoaraujo]

How to apply the tutorial for 3D meshes?

[@collinvisser7108]

Thank you for sharing this

[@MaxPB222]

Thanks for this great tutorial, it really helped me to get started in Godot :) Currently if I click fast enough I can pick up multiple draggable object at once. Is there an easy way to prevent this with the current script?

[@animestoun2023]

This error appears in version 3.5 Invalid call. Nonexistent function 'select' in base 'Position2D (zone.gd)'. The solution, which took me 1 hours, was as simple as usual rest_nodes[0].select()👎 rest_nodes[0]._select()👍

[@GrabRifle]

I got this error in line 9 (dragndrop) invalid get index '0'(on base: Array).

[@williamyu1073]

check the group if there a "zone"

[@_Garm_]

Great tutorial, thank you! :D

[@fanuelanteneh8437]

Thank you so much for this...

[@slamtronx5834]

How would you get object to snap to tile map grid? Say I have a deck of tiles and I want to place them anywhere on the map, but they must snap to the nearest grid point. Basically how it works in the editor when designing levels, but be able to do it in-game. Thanks!

[@bananacomputer9351]

Awesome!

[@safinmahmud5091]

Very Cool!!! I,m curious that how to create code for dropping object(Building/Unit) from GUI to isometric or Tilemap place

[@BramwellWilliams]

Thanks! This is a cool problem I've tackled a while ago, but that was using a shader to draw a translucent version of the object I was placing and having the image snap to the closest valid building position on the tilemap to the mouse. I do believe gingeragous' tutorials may be of great help kzbin.info/www/bejne/kGHMf6JvhpKWq7c Dragging from GUI to in game is a fiddly process I'm still trying to find the best approach for myself, if I ever do figure out a best approach I'll let you know :')

[@MrRastastic]

So I followed along in a brand new project, and in my own project. In each case I made a new scene following this tutorial, but in my existing project the functions from the Area2D signals never get called. So both scenes are exactly the same, the only difference, is that one is in my existing project. What could be wrong with my existing project? In fact, even if I copy the working scene files to my existing project it only works in my new project and not my existing one. I can't get CollisionObject2D signal to work at all in my existing project

[@eruaiokoyomoh3177]

Please make a 2D shockwave shader effect, that works with different viewports, or please make a video on the backbuffercopy node please

[@BramwellWilliams]

I can highly recommend this video about shockwave shaders: kzbin.info/www/bejne/iXSrlZqip5hops0 consider backbuffercopies in my backlog c:

[@eruaiokoyomoh3177]

@@BramwellWilliams I just came back from that video but my game uses a different aspect ratio from my screen so It doesn't work.

[@BramwellWilliams]

Ahh I see, fiddley. In the circle wipe part of this video It should help explain making shader affects use your window dimensions :) kzbin.info/www/bejne/qYvPiWylbtp5bdE

[@stathisk2949]

if anyone is still here, i have a question to ask. I realized that the drag works perfectly when the sprite is centered, but if i place it away from the scene center and test the scene, the moment i click the sprite, it jumps way ahead of the mouse relative to how far away it was from the center. is there a way to fix this? thanks

[@TableTopNeverStop]

what is probably happened is you moved the sprite 2d's location to a different spot than the root node. this creates an offset, you accidentally offset the sprite from the root, but you can only see it when you go to move it.

[@guildaludica7013]

Great Job!

[@darkhunter777]

After signal need write -- >> if event is InputEventMouseButton and event.pressed: OR write ERROR in GD4 !

[@kito9690]

how do I stop the object from going through collision areas?

[@BramwellWilliams]

That would require a fairly different approach - you would want to make the dragable object be a rigid body or kinematic body with a collision shape, and instead of moving it with lerp you would need to use move and slide and do some vector maths to come up with a vector that points to your mouse position. I hope that's helpful :)

[@boomerboyzr9612]

this is great, but is there any way that if I fling a selectable object, it will go in the direction I flung it in?

[@BramwellWilliams]

thanks! For something like that you'd probably either want to use collision shapes and use move_and_slide to move the object rather than lerp, or have a seperate velocity variable and save the current direction of travel as you move the shape, then when let go move using the velocity variable if there is any and decrement it over time. Hope this is helpful!

[@abdulkadirwaziri2698]

Please help, i am having trouble here. func _ready(): rest_nodes = get_tree().get_nodes_in_group("zone") rest_point = rest_nodes[0].global_position rest_nodes[0].select() My function draw is not displaying the circles. func _draw(): draw_circle(Vector2.ZERO, 150, Color.blanchedalmond)

[@PrimerFPS]

it's not displaying the current scene u are working at probably, that was what happened to me lol, press f6 to play your current scene u are working at

[@cmds.learning7426]

great job

[@moejoefree7222]

thank you

[@jjcampis]

Great video!, I've learned a Lot But i want to make a game like drag and match... Thinking on kids that have to drag the correct shape into a Shadow figure. Previously i made this kind of game in phaser.js but i want to make it in godot can you show me how to achieve this? Thanks!

[@peoplearecool8766]

Does anyone know how to create drag and drop such that when dragging, png image instantly follows the position of cursor and doesn't take time to reach mouse position and doesn't falls back from cursor (also doesn't creates gaps between cursor and dragged object) ?

[@peoplearecool8766]

So basically how to create dragging more fast and responsive

[@sebcon952]

@@peoplearecool8766 In case you're still looking for an answer: Just increase the number delta is multiplied with inside the lerp. Try 100 instead of 25

[@peoplearecool8766]

@@sebcon952 THX

[@timetorelaxfocus9642]

Thanks

[@AmberLimShin]

Thank you for a thorough and straightforward tutorial! Too awesome not to subscribe :D

[@thomasparas5668]

Dude, thanks.

[@Game-made4you]

its working to android?

[@Icessien]

Please make an inventory system tutorial

[@angeloliver2825]

Position2D was name to Market2D in GD 4.x

[@optionaldev2876]

sneaky style

[@BramwellWilliams]

Lol - btw love your videos!

[@eyesoap4536]

Thanks. A nice tutorial. Would have been better if there was no zoom ins though--it's a bit distracting and it forces a lot of pauses and backtracking.