Drag and drop

Pozitive Nici 3 years ago updated by Elin 2 years ago 19

How can I implement drag-and-drop into a 2d game? I'm very bad in English)

Bolt Version:
Unity Version:
Scripting Backend:
.NET Version (API Compatibility Level):

+1. Maybe ludiq should give simple tutorial like this. 


That should it be or?
The set color node is just for visualisation.

If you want this smooth drag you would need to add an delay with an tweening system.

If you want same sort of grid snapping i would use rigidbodys with trigger collider.

Hi, this topic is old but Elin can you give more details about drag & drop you discribed. More detailed tutorial if possible. I did first picture alright, but didn't get about rigid body and collider. Where to put what? If that is not a problem, please give discription or if possible or a way to contact you and talk about it.

For the grid snapping i just added a kinematic rigidbody and a box collider (trigger checkbox enables) to all the cells. My drag able icon has o default box collider. But it should be easy to use 2d collider. I only work in 3D space so I almost don't know how most of the functions work.
It looks like there isn't a drag and drop for UI yet.
I'm not very creative, when it comes to tutorials. Maybe you can tell me in more detail what you would like to learn in a drag and drop tutorial?

Sure: I'm trying to make small app or even game where all you need to do is to put images from the cells into the box below. Fully 2D. I admit i also tried Playmaker, but when it comes to Drag & Drop, it's no good. Heavy, difficult. In Bolt simple Drag & Drop (to bad D&D short name is already taken), like on the first gif is quite easy (thanks!). But as for the cells, i mean putting something there, thing aren't working.

So things you did were in 3d and not UI (not with Canvas)??? May be that's the reason. Also didn't get about variable "dropped" (simple boolean? which you make in left menu and is it true or falls on default?) Sorry if all those are silly.

Its still UI with a screen space canvas but i was using 3d collider and rigidbodys.
Yes the dropped variable is just a boole to block the on trigger stay event after releasing the icon.
Without it, the event would trigger as long as the icons is staying inside. 
I could have used a On trigger enter event but there where some problems, when dragging the icon out of the trigger and releasing it then...I think so.
I have to redo the flow to figure out why I did it like this.

I think now i would do the basic drag and drop more like this
A little dampening looks so much better

Like i sad, on canvas (in 2D) simple drag & drop was done in 3 actions: On Drag Event, Transform position set, input mouse position. Worked perfectly (didn't try the color staff). But when i added cells - it simply ignored them (DropOnGridAction group from the second gif). I tried box collider with/without trigger (on/off object/cells), but entire block was simply ignored. The cells i made are another image in Canvas. Should they be separate object? Can you show details from hierarchy and properties of objects?


So every cell has a Box Collider 2d.
Make sure the collider size matches the rect transform size.

The draggable image has a Box Collider 2D with trigger enabled and a kinematic rigidbody.
To simplify I put the flow machine on this object.
I prefer choosing a smaller size for the collider, so the objects snaps only to a new grid cell, if the center is inside the new cell

I think this is more optimized

...if you feel fancy you can also add some tweening for the snapping

And what about the cell? Maybe i don't know about them. Simply another image? With what properties? 

As you can see in the first image from my last reply. Each cell needs a collider, which defines the boundary from each cell.

That i did. I guess i'm doing something wrong way. Can you (in short) discribe how you make cells and show their full properties. Also in Flow Machine only "On Drag" and "On End Drag" are funtioning for some reason.


 All the (images) that are selected are my cells. They are children of a UI panel, which has a layout grid component with a padding from 3 on X and Y.

They are children of a UI panel, which has a grid layout group component with a padding from 5 on X and Y.

I don't understand what did wrong. Here's what i have:

Make sure you replicate the correct setup like here:

There is no Boolean variable anymore, because i write the target position into the SnapPos Vector3 variable and check it against null.
What you are doing is checking a boolean that is true if it is null. but because it has a fixed value in your graph (true) the null check will always be not null.
You mixed my first version with the last one. They are completely different.

Second. The collider from your Object 1 is filled over the whole sprite. That will not work correctly  with the setup above. You have to decrease the collider radius. I would prefer to set it to 4 instead of 40.

I can't see the properties of your grid cell. It looks like you added the collider. That's correct. Make sure, that it isn't a trigger and the collider is filling the image.
You want to know the border from each cell. That's why it is filled. But from the dragable Object you only want to know when the center is colliding with a cell. When you have the grid cell selected (Image) hit ctrl + D a bunch of times to fill up your grid.

Thanks a lot. It works now. If it won't be troublesome for you, i have two more questions on that. If it will - you can just point me on the right manual. First, how can make so that object which i drag can only exist in the cells and can't exist outside them. So if i didn't finish draging it, the object will be back to the original cell. And second, it's more about global variables (or not?) how can i specify a variable (which type to be more specific), that an object (and exactly that object, if i have several) is at the destination and not on the original cell. Last one is for making combinations in the box where objects will be dragged.

This are questions specially for you case.
I would recommend you join the ludiq discord (my name is there Quacklin) and we can solve it much better.


Elin, you're my hero. Thank you :-)

It should be pinned on tutorial section


There are more UI tutorials coming soon, but Elin posted one in the Learn hub, as well as Home Mech. GameGrind should have another coming soon!