Godot4.4
I want to drag child controls from the VBoxContainers, is that possible?
How to ahieve that? Should the child UI element added with some code too? Thanks!
Hi!
Here’s how I would try to do it:
Now, to know at what index the dragged control would have to be inserted, you’ll probably have to do some maths.
For a VBoxContainer, one thing you could try is getting your container position and height, and checking where the dragged control is, based on those info. For instance, if the position is (0,0) with a height of 200, and the dragged control is at a height of 50, it means it’s at 25% of the container height, so, if you have 20 children inside the container, you can insert one at index 5 (which is 25% of 20).
However, this would not work if children have different height. In that case, what you could do is loop through all children, and stop whenever you find one thats global position is below the dragged control; you can then do the insertion just before this child.
Hope that makes sense, feel free to ask if not.
Please note that I’m not a Godot expert so maybe someone will come with a better native solution or existing code, but hopefully this will help! Let me know.
Thanks! Let me have a try
Sorry but my code dosen’t works a bit, I’m new to godot, could you please teach me about that?
Here’s my code dosen’t working
using Godot;
using System;
public partial class DraggableVBoxContainer : Control
{
[Export]
public Panel UIInsertPointer;
private bool _pointerInserted;
public override Variant _GetDragData(Vector2 atPosition)
{
Vector2 localPosition = GetLocalMousePosition();
foreach (Control c in GetChildren())
{
Rect2 rect = c.GetRect();
if (rect.HasPoint(localPosition))
{
return c;
}
}
return base._GetDragData(atPosition);
}
public override bool _CanDropData(Vector2 atPosition, Variant data)
{
return data.Obj is Control;
}
public override void _DropData(Vector2 atPosition, Variant data)
{
if (data.Obj is Control draggedControl)
{
int insertIndex = GetInsertIndex(atPosition);
if (draggedControl.GetParent() != null)
{
draggedControl.GetParent().RemoveChild(draggedControl);
}
AddChild(draggedControl);
MoveChild(draggedControl, insertIndex);
}
}
public override void _Ready()
{
}
public int GetInsertIndex(Vector2 dropPosition)
{
Vector2 localPosition = GetLocalMousePosition();
for (int i = 0; i < GetChildCount(); i++)
{
Control child = GetChild(i) as Control;
if (child == null) continue;
Rect2 rect = child.GetRect();
float centerY = rect.Position.Y + rect.Size.Y / 2;
if (localPosition.Y < centerY)
{
if (!_pointerInserted)
{
child.AddChild(UIInsertPointer);
_pointerInserted = true;
}
return i;
}
}
return GetChildCount();
}
}
What do you mean by “the code is not working”, it is the pointer feedback, the dropping, or something else?
By reading your code, what seems weird to me is that you’re updating UIInsertPointer inside GetInsertIndex, which you only call in_DropData, so my guess about what’s not working is the pointer never moves, right?
You’d need to update it every frame (or when the mouse is moving, but let’s update it every frame to begin with), because you want to show where the object will be dropped (i.e. before calling the drop method).
Sorry, when I trying to test my code, nothing was working, like there’s no script added at all. It might be the child UI element I want to move never be dragged out, I don’t know how to drag it out from the panel. UIInsertPointer is an element for test, but since the child element can’t be dragged out, I’m unable to test it.
When you have this kind of problem, you should check every single step to locate the one that’s causing problem.
Is your click even detected? If not, why? Is it the mouse filter or something else?
Is the _GetDragData method called? If not, why? If it is, why is it not working? Do the GetChildren() call return a valid list? etc.
It’s hard for me to tell you precisely what’s going wrong as it’s not just a single code instruction issue, it might be related to your nodes hierarchy or some other codes I don’t have (+ as mentionned, I’m no Godot expert), but debugging must sometimes be done this way: check every step, fix every one of them if it’s bugged, and do that until the feature works.
I can try to help more if needed, but it would help having the project of at least some scenes/scripts files to work with.
I’ve tried it, and it can GetDropData, but since I can’t move child controls from this Container, I’m unable to test if it can get child control properly. I’m stuck on how to move child element out of this control by drag.
To move a control out of the container, you need to detect on which control you clicked (should be fairly easy, as Godot provides events for mouse inputs on controls), then remove it from the container (and re-parenting it right after so that it’s still inside the tree and visible, just not affected by the container; for instance you could add it as a child of UIFactory).
Once removed, this control should follow the mouse cursor so that player knows it’s currently being dragged, and can be dropped.
I’m not sure what your exact use case is, but Tree is easier to use with the built in drag and drop functions because it has a bunch of functions that tell you what item is at a certain position and whether the dragged item should be placed before, after, or on top of the item.
Additionally, the built in drag and drop system creates a separate drag preview node for the dragging, it doesn’t have anything built in to hide the original node or anchor it to the mouse.
Thanks, I tested and now the child control is able to detect drag(I used to have a misunderstand that child don’t need code to achive that) but it still can’t move with the mouse, sadly I have no Idea how to achieve that.
You can detect that you are currently dragging, by setting some boolean variable to true when clicking, and setting it back to false when releasing.
What you can do is, while dragging, get the mouse position (probably using GetGlobalMousePosition()), and move the dragged object to that position. You may want to apply some offset so that the object is centered relative to the cursor, but that should do the job.
Also, have a look at what paintsimmon said about the Tree class, I don’t know about it, and maybe it’s not what you’re looking for, but it’s worth reading the documentation page a bit. 
Thanks, I’ve searched for Tree but it seems can’t meet the demand. I’m making a control having a child container(VBoxContainer), the child container can have their children dragged between the panels, and able to sort children by dragging the items. It might works like this but my target is not make a tree view.
Thanks, The child is now able to move with the mouse cursor! But the parent control dosen’t call GetDragData() this time, should the child control sent a signal to the parent control to set drag data? I don’t know how to do that, all the tutorials I found only move spirits but not UI elements.
I’ve read the document and is sure that Tree is not what I’m looking for. What I’m finding is like this, but the type of children are not limited in one type.
Usually, to communicate between parents of children nodes, it works by calling functions when going down (parent to child) and signaling up (child to parent). You can indeed use a signal on children to detect that you want to drag it, and the parent can listen to this signal to trigger the adequate code.
I don’t know how to do that specifically in your code, but that’s the idea.
When trying that I found another problem. Since we used reparent, how could the parent panel the child control is moving to get the signal from it? Seems this way only works when moving a child from a parent control.
When you click on an object to drag, it has to be inside the container. Clicking should trigger some signal the container listens to, so that it knows that “one of its children is dragged”.
Then, you don’t just reparent the object, you need to keep a reference to it so that the container still knows that even though the object is not a child of his anymore, it still exists, is being dragged, and will be dropped.
Let’s say you have a script attached to your container, this would look something like this:
public Control DraggedObject;
public void OnObjectDragBegin(Control control)
{
control.Reparent(draggedObjectContainer); // draggedObjectContainer is some node reference on your side.
DraggedObject = control; // Keep the dragged control in memory.
}
public void OnMouseReleased()
{
if (DraggedObject != null)
{
// TODO: Add dragged object to container.
DraggedObject = null; // Reset the variable.
}
}
public void MoveDraggedObject()
{
if (DraggedObject != null)
{
// TODO: Follow mouse.
}
}
This is just code I wrote on the fly, the actual implementation is on your side, just trying to give you an idea of what I have in mind.