A flexible UI dragger module, rbx-dragger

Resources Community Resources
, , ,
#1

rbx-dragger v1.0.0

rbx-dragger provides an easy-to-use solution for implementing draggable GUI elements in your Roblox games.

Features

  • Simple API for creating draggable objects
  • Customizable drag behavior
  • Rate limiting for performance optimization
  • Separate target object support
  • Event signals for drag start, drag, and drag end
  • Optional key binding for drag activation
  • Multiple drag types, such as rotate, linear translate and plane translate

Quick Example

local dragger = require(path.to.rbx_dragger)

local success, myDragger = dragger.new({
    object = myDraggableFrame,
    rate_limit = 2, -- Update every 2 input changes
    update = true -- Automatically update position (default)
})

if success then
    myDragger:enable()
    
    myDragger.drag_started:Connect(function()
        print("Started dragging!")
    end)
    
    myDragger.dragged:Connect(function(newPosition)
        print("New position:", newPosition)
    end)
    
    myDragger.drag_ended:Connect(function()
        print("Finished dragging!")
    end)
end

Key Features Explained

  1. Easy Setup: Create a dragger with a single function call.
  2. Rate Limiting: Optimize performance by controlling how often the drag updates.
  3. Separate Target: Optionally drag a different object than the one receiving input.
  4. Auto-updating: Choose whether the module automatically updates the object’s position or let you handle it manually.
  5. Event Signals: Connect to drag events for custom behaviors.
  6. Key Binding: Optionally require a key to be held for dragging (great for building tools!).
  7. Drag Modes: Choose the response behaviour to a drag input

Installation

  1. Insert the .rbxm file from the Github Releases page into your Studio game or add the marketplace asset to your toolbox.
  2. Place the module in your game (e.g., in ReplicatedStorage).
  3. Require the module in your scripts.

API Overview

dragger.new(info: dragger_info) -> (boolean, dragger?)

type drag_mode = "rotate" | "plane" | "linear"

type dragger_info = 
{
    object : GuiObject,
    target : GuiObject?, -- default object
    rate_limit : number?, -- default 1
    update : boolean?, -- default true
    drag_mode : drag_mode?, -- default "plane"
    drag_axis : Vector2?, -- default Vector2.new(1, 0)
}

type dragger = {
    -- Properties
    object: prop<GuiObject>,
    target: prop<GuiObject>,
    rate_limit: prop<number>,
    update: prop<boolean?>,
    dragging: immutable_prop<boolean>,
    drag_count: immutable_prop<number>,
    enabled: immutable_prop<boolean>,

    drag_mode : prop<drag_mode>,
    drag_axis : prop<Vector2>,

    -- Events
    drag_started: restricted_signal,
    dragged: restricted_signal,
    drag_ended: restricted_signal,

    -- Methods
    enable: (self: any, key_code: Enum.KeyCode?) -> (),
    disable: (self: any) -> ()
}

Feedback and Contributions

I’d love to hear your thoughts on this module! Feel free to leave comments, suggestions, or report any issues you encounter. If you’d like to contribute to the project, check out the GitHub repository and submit a pull request.

Happy dragging!

1 Like
#2

Erm? UIDragDetector | Documentation - Roblox Creator Hub

1 Like
#3

Thank you for highlighting the UIDragDetector instance. I see your point and it’s totally a valid concern. While it’s indeed a great built-in feature, rbx-dragger was developed prior to its introduction. I think module retains relevance through several niche use cases:

  1. The option to require a specific keycode for drag activation
  2. A separate target object property for flexible drag-and-move scenarios
  3. An enabled property for easy toggle of drag functionality

rbx-dragger can also serve as a drag input detector with customizable rate limiting. These features cater to specific development needs that may not be fully addressed by the built-in solution.

With that being said, I am intending to add more features in the future like dragging bounds and axis constraints, as the module is bare-bones at the moment.

#4

Since the UIDragger is native, it would most likely be more efficient for you to use it in the backend and have this resource act as an extended wrapper

Maybe, you could have both in the module as since it’s a Studio Beta it’s not out for clients yet? This would require implementing every feature of the UIDragger though. Kind of how Topbar+ functioned during the FFlag Beta for Topbar V3.

1 Like
#5

Update: v1.0.0

Release edition.

Added:

  • 2 additional drag modes, Rotate and Linear Translate
  • Drag Axis property for Linear Translation