A flexible UI dragger module, rbx-dragger

Resources Community Resources
, , ,
#1

rbx-dragger

I’ve been working on called rbx-dragger. This module 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

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!).

Installation

  1. Get the module from the rbx-dragger GitHub repository. Or add the roblox 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 dragger_info = {
    object: GuiObject,
    target: GuiObject?,
    rate_limit: number?,
    update: boolean?,
}

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>,

    -- 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.