How To Make YOUR Gui Draggable
Let me show you a way of creating a draggable UI with my DragModule!
Get the module here
ScreenGui
First add a new frame to your GuiObject that you want to drag
This will be your handler it will be used to drag its parent
Now add a Tag called "DragHandler" to your handler
Now you have to require the module in any LocalScript and
call the constructor .New(config) (you can pass a config if you want)
then call the method :SyncObjects() and thats it!
local DragModule = require(script.Parent.DragModule)
local DragService = DragModule.New()
DragService:SyncObjects()
Its fully working now. But maybe we would want to disable the ability to drag?
We can do that with :RemoveObject(object: GuiObject)
local DragModule = require(script.Parent.DragModule)
local gui = script.Parent.ScreenGui.Background.MainFrame.Handler
local DragService = DragModule.New()
DragService:SyncObjects()
task.wait(4)
DragService:RemoveObject(gui)
In the gif below we can see that the gui stayed in its place after a while
But, remember that :RemoveObject() doesnt remove our “DragHandler” Tag. So after we call :SyncObjects() in the future it will be able to drag. If we dont want that we have to delete the tag ourselves with CollectionService.
You can implement your own behavior with 3 connects:
DragModule.StartedDrag:Connect(function(object: GuiObject,position: Vector2 | Vector3)
--starting behavior
end)
DragModule.Dragging:Connect(function(object: GuiObject,delta: Vector2 | Vector3)
--(delta is the change in position compared to last drag)
end)
DragModule.EndedDrag:Connect(function(object: GuiObject,position: Vector2 | Vector3)
--ending behavior
end)
To stop the default position change with drag create a config table and change the AUTO_DRAG property to false
SurfaceGui
Making a draggable gui with a SurfaceGui is almost exactly the same.
You just HAVE TO remember these things:
- The SurfaceGui parent NEEDS to be a BASEPART with a BLOCK SHAPE
- The SurfaceGui HAS TO be on the FRONT FACE of the part
- The Part’s PIVOT NEEDS to be CENTERED(pivot with a postion and rotation of 0)
And with that it mind your gui should work fine.
And Thats It!
Get the module here
Check out our roblox group:
Join the group and follow our socials to see in practice implementation of this module in our current project!(in developement)
If you need any help ask here or on our discord:
