Draggable For SurfaceGui
The draggable property is still usable, but it is deprecated. Thus, I created this module; the module allows you to make a GuiObject draggable for SurfaceGui with any NormalId.
Preview
The green dot is simply a representation of where the mouse point is in relation to the normal ID of the part surface GUI. This is disabled by default.
Constructors
DraggableSUI.new: (guiObject: GuiObject, config: DraggableConfig?) -> Draggable
Creates a new object of type Draggable. The parameter config is a type of DraggableConfig; this is optional. There is also a hidden parameter, which is the _debugMode type of DebugModeConfig, which is what you saw in the preview video.
Special
DraggableSUI.DragAt :: DragAt
DragAt is a custom enum that allows you to set where the GuiObject starts dragging, relative to the location of the mouse.
Basic Usage
local DraggableSUI = require(game:GetService("ReplicatedStorage"):WaitForChild("DraggableSUI"))
local DraggableFrame = DraggableSUI.new(script.Parent)
Once you have created a draggable, you may now use the methods listed below.
Methods
ActivateFrom
When the mouse is over the GuiObject, the draggable will be activated when mouse button 1 is down.
ActivateFrom: (self: Draggable, guiObject: GuiObject) -> ()
Destroy
This method disconnects all connections and destroys all signals. This method is called when the GuiObject is destroyed.
Destroy: (self: Draggable) -> ()
Disable
This method forces the dragging to stop and sets the Disabled property to true. This is false by default.
Disable: (self: Draggable) -> ()
DisableLimit
This allows the draggable to be dragged anywhere on the surface gui. This is disabled by default.
DisableLimit: (self: Draggable) -> ()
Enable
This method sets the Disabled property to false; if the Disable method is called while the draggable is active, the dragging continues. This is true by default.
Enable: (self: Draggable) -> ()
EnableLimit
This method allows you to limit the draggable, as seen in the preview video. The parameter config is a type of LimitConfig; this is optional.
EnableLimit: (self: Draggable, config: LimitConfig?) -> ()
EventListener
This method allows you to listen for signals such as "start", "end", or "move". The start fires when the client has pressed mouse button 1 while hovering over the GuiObject. The end fires when the client releases mouse button 1 while the draggable is active. Lastly, the move fires when the GuiObject has been dragged. All of this signal fires with the mouse location on the surface gui. The parameter funcSelf is a table where the first parameter of the func is set to self, while the parameter ...any? is for extra information for the func; this is passed after mouseLocation. This method returns a type of SignalConnection, which is similar to RBXScriptConnection
EventListener: (
self: Draggable,
eventType: "start" | "end" | "move",
func: (mouseLocation: Vector2, ...any?) -> (),
funcSelf: {}?,
...any?
) -> SignalConnection
ForceEndDrag
This method forces the dragging to stop. This still triggers the “end” signal.
ForceEndDrag: (self: Draggable) -> ()
ForceStartDrag
This method force activate the dragging, even without mouse button 1 being down. The parameter dragAt is optional; if present, it must be a type of DragAt; if the parameter is DragAt.Center the dragging starts at the center of the GuiObject relative to the location of the mouse, while dragAtOffset is dragAt + offset. This still triggers the “start” signal.
ForceStartDrag: (self: Draggable, dragAt: DragAt?, dragAtOffset: Vector2?) -> ()
Ignore
This method allows you to stop the draggable from activating when the mouse is hovering over the GuiObjects inside the parameter list. The parameter protected indicates whether to use the protected call function when looping the list.
Ignore: (self: Draggable, list: { GuiObject }, protected: boolean?) -> ()
IgnoreChildren
This method calls the Ignore method, with list being GuiObject:GetChildren() and protected being true.
IgnoreChildren: (self: Draggable) -> ()
IgnoreDescendants
This method calls the Ignore method, with list being GuiObject:GetDescendants() and protected being true.
IgnoreDescendants: (self: Draggable) -> ()
IsActive
This method allows you to identify if the draggable is active. This method returns a type of boolean.
IsActive: (self: Draggable) -> boolean
ListenAllEvent
This method allows you to listen to all of the available signals: "start", "end", and "move". The start fires when the client has pressed mouse button 1 while hovering over the GuiObject. The end fires when the client releases mouse button 1 while the draggable is active. Lastly, the move fires when the GuiObject has been dragged. All of this signal fires with the mouse location on the surface gui. The parameter funcSelf is a table where the first parameter of the func is set to self, while the parameter ...any? is for extra information for the func; this is passed after mouseLocation. This method returns a dictionary with the indexes "start", "end", and "move" which all have the same type, SignalConnection which is similar to RBXScriptConnection.
ListenAllEvent: (
self: Draggable,
func: (mouseLocation: Vector2, ...any?) -> (),
funcSelf: {}?,
...any?
) -> {
["start"]: SignalConnection,
["move"]: SignalConnection,
["end"]: SignalConnection,
}
SetDragAt
This method allows you to set where the dragging starts relative to the location of the mouse. The parameter dragAt is optional; if present, it must be a type of DragAt; if the parameter is DragAt.Center the dragging starts at the center of the GuiObject relative to the location of the mouse, while dragAtOffset is dragAt + offset. This still triggers the “start” signal.
SetDragAt: (self: Draggable, dragAt: DragAt?, dragAtOffset: Vector2?) -> ()
SetTweenInfo
This method allows you to have smooth dragging on your draggable.
SetTweenInfo: (self: Draggable, tweenInfo: TweenInfo) -> ()
Types
DraggableConfig
- This data type is used in the new constructor for the
configparameter.
- This data type is used in the EnableLimit for the
configparameter.
DebugModeConfig
- This data type is used in the new constructor for the hidden
_debugModeparameter.
Custom Enum
DragAt
| Name | Value | Summary |
|---|---|---|
| Center | 4 | Drag at the center of a GuiObject. |
| CenterLeft | 3 | Drag at at the center left of a GuiObject. |
| CenterRight | 5 | Drag at at the center right of a GuiObject. |
| BottomCenter | 7 | Drag at at the bottom center of a GuiObject. |
| BottomLeft | 6 | Drag at at the bottom left of a GuiObject. |
| BottomRight | 8 | Drag at at the bottom right of a GuiObject. |
| TopCenter | 1 | Drag at at the top center of a GuiObject. |
| TopLeft | 0 | Drag at at the top left of a GuiObject. |
| TopRight | 2 | Drag at at the top right of a GuiObject. |