About
This module allows you to make a GUI element draggable. There is already a similar module for this, but this one has more features. Everything will be explained later on. This module only works with ScreenGui. I do plan on making it possible for SurfaceGui.
How to use
We must first require the module. Let’s also make a variable for the GUI element that will be draggable as well.
local Draggable_UI = require(...)
local Frame = script.Parent.Frame
Then we create our draggable element with the Draggable_UI.new function and pass in the element that we want to be draggable, in this case, Frame. We are also able to pass in a second argument with true/false. This just converts position to offset if the argument is false, and scale if true, which is the default.
local Draggable_Frame = Draggable_UI.new(Frame)
And now your GUI element should be draggable. To disable the dragging you can simply use:
Draggable_Frame:Toggle()
We are also able to stop it from dragging from an overlapping GUI element.
Draggable_Frame:IgnoreDescendants()
Lastly if we want to add tween for our dragging we simply use SetTweenInfo function.
Draggable_Frame:SetTweenInfo(TweenInfo.new(0.2))
Example
local DraggableUI = require(script.Parent.DraggableUI)
local Frame = script.Parent.WithTween
local DraggableFrame = DraggableUI.new(Frame)
DraggableFrame:SetTweenInfo(TweenInfo.new(0.5, Enum.EasingStyle.Quad))
DraggableFrame:Ignore({Frame.UnDraggable})
local Frame = script.Parent.WithoutTween
DraggableUI.new(Frame):Ignore({Frame.UnDraggable})
Events
We are able to listen 3 event handlers which uses BindableEvent, which might cause a memory leak if not handled properly, I do plan on using something similar to Signal module. Or I could also just use if statement if Started has a value and a type of function. However, if ever there is a time where you have to use Started twice, the function will only work for one of the functions.
-- This fires the event when left click or touched started/began.
Draggable_Frame.Started:Connect(function()
print("Dragging started at: " .. os.date("%X"))
end)
-- Upon left click or touched released/ended this event get's fired and
-- passes in the mouse position which is a type of Vector2.
Draggable_Frame.Released:Connect(function(Position: Vector2)
print(Position)
end)
-- Upon mouse or touched movement this event get's fired and passes in
-- the mouse position which is a type of Vector2.
Draggable_Frame.Moved:Connect(function(Position: Vector2)
print(Position)
end)
The event that would be of use often would probably be the Released. I can see that this would be of use for when it comes to drag and drop.
Features
As stated before the second parameter just uses Scale if true and Offset if false.
Draggable_UI.new(UI: Instance, byScale: true?)
If Value is empty, it toggles from Enabled to Disabled. If the Value’s value is false, then we force disable the dragging and true to force enable.
Draggable_UI:Toggle(Value: boolean?)
This function just allow you to add animation when dragging.
Draggable_UI:SetTweenInfo(tweenInfo: TweenInfo)
There are three functions that stop it from dragging from an overlapping GUI element. The second and third just use the first function and passes in second argument a true value. The first function’s argument is the list of overlapping UI, while the second argument just place the loop inside a protected function.
Draggable_UI:Ignore(list: { Instance }, instanceCheck: false?)
Draggable_UI:IgnoreChildren()
Draggable_UI:IgnoreDescendants()
And finally, when we are done using the draggable element, we simply use the Destroy function.
Draggable_UI:Destroy()
