Introducing UIDragDetectors [Studio-only Beta]

Updates Announcements
#299

Also, here’s the function whereas you can click a plugin button and create a slider:

local CHS = game:GetService("ChangeHistoryService")

toolbar = plugin:CreateToolbar("Your toolbar name")
addSlider = toolbar:CreateButton("Add Slider", "Adds a slider.", "An image that you want to use")

function createSlider(v: Instance)
	local Slider = Instance.new("Frame")
	local RoundSlider = Instance.new("UICorner")
	local precentage = Instance.new("NumberValue")
	local Value = Instance.new("NumberValue")
	local LocalScript = Instance.new("LocalScript")
	local Config = Instance.new("ModuleScript")
	local InnerSlider = Instance.new("ImageLabel")
	local InnerSliderRound = Instance.new("UICorner")
	local UIDragDetector = Instance.new("UIDragDetector")
	local Configuration = Instance.new("Configuration")
	local floor = Instance.new("BoolValue")
	local upperNum = Instance.new("NumberValue")
	local lowerNum = Instance.new("NumberValue")
	Value.Name = "Value"
	Slider.Size = UDim2.new(0, 250, 0, 40)
	InnerSlider.Size = UDim2.new(0, 40, 0, 40)
	Slider.BackgroundColor3 = Color3.fromRGB(113, 113, 113)
	InnerSlider.BackgroundColor3 = Color3.fromRGB(130, 130, 130)
	InnerSlider.Parent = Slider
	precentage.Name = "Precentage"
	lowerNum.Parent = Configuration
	lowerNum.Value = 0
	lowerNum.Name = "lowerNum"
	upperNum.Parent = Configuration
	upperNum.Value = 100
	upperNum.Name = "upperNum"
	floor.Parent = Configuration
	floor.Value = true
	floor.Name = "floor?"
	Configuration.Parent = Slider
	UIDragDetector.Parent = InnerSlider
	UIDragDetector.BoundingUI = Slider
	UIDragDetector.Enabled = false
	UIDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine
	Slider.Name = "Slider"
	InnerSlider.Name = "InnerSlider"
	Config.Name = "Config"
	InnerSliderRound.Parent = InnerSlider
	InnerSlider.Image = "rbxassetid://11432865277"
	Config.Parent = LocalScript
	Config.Source = [[
local Configuration = script.Parent.Parent.Configuration
local Floor = Configuration["floor?"].Value
local Config = {
	["upperNum"] = Configuration.upperNum.Value,
	["lowerNum"] = Configuration.lowerNum.Value,
	["floor"] = nil
}
function Config.floor(x: Number)
	if Floor then
		return math.floor(x)
	else 
		return x
	end
end
return Config
]]
	LocalScript.Source = [[
	local Slider = script.Parent
local Inner = Slider.InnerSlider
Inner.UIDragDetector.Enabled = true
local Config = require(script.Config)

while true do
	wait()
	local SliderPos = Slider.AbsolutePosition
	local InnerPos = Inner.AbsolutePosition
	local InnerSize = Inner.AbsoluteSize
	local SliderSize = Slider.AbsoluteSize
local SliderPosX = SliderPos.X
local SliderSizeX = SliderSize.X
local InnerSizeX = InnerSize.X
local InnerPosX = InnerPos.X
local lowerBound = SliderPosX
local upperBound = SliderPosX+SliderSizeX-InnerSizeX
local precentage = (InnerPosX-lowerBound)/(upperBound-lowerBound)
Slider.Precentage.Value = precentage
	Slider.Value.Value = Config.floor(Config.lowerNum+(Config.upperNum-Config.lowerNum)*precentage)
end
]]
	LocalScript.Parent = Slider
	Value.Parent = Slider
	RoundSlider.Parent = Slider
	precentage.Parent = Slider
	Slider.Parent = v
end

addSlider.Click:Connect(function()
	local selection = game:GetService("Selection"):Get()
	if selection then
		for _, v in pairs(selection) do
			for _, b in pairs (Supported) do
				if v:IsA(b) then
					local slider = createSlider(v)
				end
			end
		end
	end
end)
1 Like
#300

Ah, like if you pass in a Vector2 coordinate, it gives an X/Y percentage of relatively where it’s at (with 0.5/0.5 being the middle)?

That sounds more like a feature for GuiObject itself-- I’m not quite sure if it’s something that will go through, especially as it’s not too complicated to compute-- but it might be worth bringing up.

2 Likes
#301

Technically this message but the code was built in.

#302

Actually it’s the inverse, the Vector2 coords of it determines the precentage, I’d suggest making it read only or changable.

#303

any update on when it will be released for clients?

1 Like
#304

I have a bit of a question. How will this work with Roblox’s keyboard UI Navigation system? The UIDragDetectors doesn’t seem to work using the PageUp, PageDown, End, and Home keys.

1 Like
#305

Is there a way to make UIDragDetectors use right & middle clicks be used to start dragging UI, and/or other keys? This is useful for making inventory shortcuts such as splitting a stack of items.

1 Like
#306

At the moment, there unfortunately is not.

#307

The update next week will enable Gamepads (Joystick, DPad) and Keyboard Navigation (WASD, Arrow Keys) to use UIDragDetectors during the UI Selection / Navigation mode.

2 Likes
#308

Next week Wednesday! Unless something explodes and we have to roll it back-- in which case I will update this thread.

Edit: We’ll probably open up enabling it on request-- it takes a week or two for new updates to roll out to mobile devices, so we will hold off on enabling universally until all devices are able to acquire the right version.

1 Like
#309

We prayed for times like these

3 Likes
#310

yes no doubt, thos could be useful for VR i guess

1 Like
#311

Will UIDragDetector finally work outside of studio on Wednesday after the update?

#312

Updates on October 17th, 2024:

  • UI Selection Mode (Mode activated by \ on keyboard) now works with UIDragDetectors! GuiObject instances with an enabled UIDragDetector will automatically be selectable with navigation in this mode. Note that there are some issues that exist with absolute DragRelativity settings in this mode at the moment.
  • UIDragDetectors are now only disabled when a tool or the UIEditor plugin is active-- other plugin activation will not interfere with dragging.
  • Changing Min/Max DragTranslation during drag functions properly.
  • Screen insets are taken into account properly with Min/Max DragTranslation.

As for enabling the feature on engine-- expect exciting news within the next couple days! It takes a couple weeks for new updates to be fully available on mobile devices, but we are looking into ways to make it available for the client on other platforms earlier.

3 Likes
#313

Good to hear! Are there any updates on layout support and the slider issue fix I mentioned a while ago?

Also, will the built-in backpack be updated to use this instance, rather than the outdated draggable property?

#314

Wondering if it will be possible to drag items that are constrained by a UIList or UIGrid soon, this new system would be perfect for my custom backpack.

1 Like
#315

No existing plugins are used to use this instance, unfortunately.

I believe the slider not reaching the edges should be somewhat improved with the rounding changes, and if it was jumping up, that definitely was fixed. Any other inaccuracies, we will be iterating and improving upon.

No additional support for layouts are concrete yet, unfortunately.

1 Like
#316

Hello creators,

We are excited to announce that we are taking sign-ups to enable UIDragDetectors on select places!

Simply fill out the form below– we will enable it on the places requested every morning in Pacific Time during business days.

This sign-up enables the feature on PC and Mac clients only– mobile devices won’t receive the feature until a future date when we can turn the feature on safely for mobile devices, which we expect would be in 1-2 weeks.

Please carefully read the acknowledgements in the form.

To opt-out after you signed up, DM me and I will process it the next business day.

Sign-up link: Roblox Betas | UIDragDetector Beta for Places Sign-Up

52 Likes
#317

Also with further testing I realized you also cant use MouseButton1Click, with an icon that has a drag detector, will there be any possible way to differentiate between a player dragging a UI element and just clicking it

1 Like
#318

Just submitted the form, Love to test mess around with UIDragDetectors in game.

1 Like