DragModule
Get the module here
DragModule provides an easy way of managing draggable GuiObjects
It supports ScreenGui's And SurfaceGui's
How To Make YOUR Gui Draggable
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
I would love to hear about your experience working with the module and some tips on how to improve th code
Check out our roblox group:
