Introducing UIDragDetectors [Studio-only Beta]

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

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?

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

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

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

54 Likes

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

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

1 Like

I believe in this case, you could put on-click logic in DragStart– or have the UIDragDetector be disabled somehow if you want click signal behaviors.

If the drag is rejected for some reason (clicking outside bounding UI area, UIDragDetector is disabled, or some other reason), it would fire the signals normally.

Perhaps you could have logic that disables it on dragStart if conditions are met, then re-enable immediately? The disabling would trigger a termination of the drag and thus no further behavior, and you could run whatever on-click logic you wish without drags happening. Re-enabling immediately would allow future interactions to work with the UIDragDetector after the click (Or I suppose you could hook up re-enabling to mouseUp)

1 Like

I went ahead and tried testing each method you stated but I dont think they are as effective in the outcome I was trying to reach. I believe having a UIDragDetector in a ImageButton or TextButton, simply overrides the built in function MouseButton1Click for those instances.

I will continue to search for any solutions but overall I really like the new system, I do have one method that came to mind that I havent tried yet, which is using mouseEnter/mouseLeave to determine if the player is hovering an Icon, and then determining mouseClicked from there.

I will keep you posted.

1 Like

Ah yes, that behavior was intended to ensure we can have UIDragDetectors work for interactive GuiObjects, such as TextButton, ImageButton, TextBox, or a ScrollingFrame.

Having an enabled UIDragDetector under it overrides and disables the native interaction behavior with them.

Disabling the UIDragDetector will resume normal behavior.

You’d need a way to somehow toggle between the states to drag / click it as you wish, or have the UIDragDetector belong to a parent wrapper around the interactive button to separate the interaction / dragging areas.

2 Likes

First round of enabling the feature will go through on Monday! Please be aware that this will happen at around 10~11AM PST and prepare your places accordingly.

4 Likes

I’m sure you could do something similar to the example shown using constraints. It is one of the applications I am currently using it for.

Also, +1 for this feature - would be very useful for inventory systems.

2 Likes

I have a suggestion for the BoundingUI that would be great for map dragging/resizing system by having an UI size bigger than it bounding parent ‘crop’/fit to not go beyond the parent’s size, an example is something like arcane odyssey’s map system.
Desirable outer box fit:


Undesirable outer box fit:

If I were to explain this, it like scrolling frame without using the scroll wheel just tap and mouse.
It would help if this was considered for the future of dragdetector as making a map UI system with drag implementation so much easier.
There are further use than just a map system, upgrade tree system need this too.

Edit: Actually I was able to achieve this pretty easily so in-case needed the constraint function I used:

CropStyle = function(Pos,UI)
		--Crop Style must have drag frame Anchor and Position's scale at .5 and a parent of course. Uses offset
		local Parent : GuiBase2d = UI.Parent
		if Parent then
			local SizeOverlap = Vector2.new(math.max(UI.AbsoluteSize.X-Parent.AbsoluteSize.X,0),math.max(UI.AbsoluteSize.Y-Parent.AbsoluteSize.Y,0))
			return UDim2.fromOffset(math.clamp(Pos.X.Offset,-SizeOverlap.X,0),math.clamp(Pos.Y.Offset,-SizeOverlap.Y,0))
		end
	end
1 Like

I would like to propose a new BoundingBehavior setting that respects the parent UI element’s AnchorPoint property.

In this video, I have 2 identical sliders, where both of the handles have an AnchorPoint of 0.5, 0.5:

  • The top slider’s BoundingUI is set to the red frame and its BoundingBehavior is set to EntireObject.
  • The bottom slider’s BoundingUI is set to the green frame and its BoundingBehavior is set to AnchorPoint.
    • (Okay, I lied, of course, because that setting doesn’t exist. The bottom slider has no BoundingUI and I am using :AddConstraintFunction() to simulate what this AnchorPoint BoundingBehavior would look like.)

Here is my code to simulate that:

local dragDetector = script.Parent

dragDetector:AddConstraintFunction(100, function(proposedPosition: UDim2): UDim2
	local trackSize = dragDetector.Parent.Parent.AbsoluteSize.X
	local handleSize = dragDetector.Parent.AbsoluteSize.X
	local halfwayPoint = (handleSize / trackSize) / 2
	local scale = math.clamp(proposedPosition.X.Scale, 0 - halfwayPoint, 1 - halfwayPoint)
	local newPosition = UDim2.fromScale(scale, proposedPosition.Y.Scale)
	return newPosition
end)

Speaking of which, I also wish the proposed position parameter of the modifier function in :AddConstraintFunction() respected AnchorPoints. (I don’t think I used this method as intended, but this is my first time dabbling with UIDragDetectors.) You can see I had to subtract the halfway point of the handle UI element from the position’s scale to get it to position correctly. Otherwise it would look like this:

Same code as above, just without subtracting the halfway point:

local dragDetector = script.Parent

dragDetector:AddConstraintFunction(100, function(proposedPosition: UDim2): UDim2
	local trackSize = dragDetector.Parent.Parent.AbsoluteSize.X
	local handleSize = dragDetector.Parent.AbsoluteSize.X
	local scale = math.clamp(proposedPosition.X.Scale, 0, 1)
	local newPosition = UDim2.fromScale(scale, proposedPosition.Y.Scale)
	return newPosition
end)

Why have a BoundingBehavior setting for this?

Simply put, it would be intuitive because of how AnchorPoints work; If my UI element has an AnchorPoint of 0.5, 0.5 and I dragged it to the middle of the slider (Scale.X = 0.5), it should be exactly in the middle, not slightly to the right as if the AnchorPoint was 0, 0. Same goes for the left side (Scale.X = 0) and the right side (Scale.X = 1). And while I did offer a solution with some code above, I think having to code intuitive behavior shouldn’t be necessary.

There are probably technical reasons why this won’t work or be an easy solution, but I figured I’d suggest it anyways. That is all, thank you. :slight_smile:


Side note: My code to simulate this behavior was just something I whipped up really quick and doesn’t work as expected on any UI that is rotated.

Edit: I just noticed a solution posted above, which I didn’t get around to sooner due to the amount of replies this post has. What I’m proposing here would be a similar, one-click solution with the precision based on the UI element’s AnchorPoint.

7 Likes

Question do I put the main place? Or the sub-places I want it to be on.

(We have a browser type system to join servers thats why)

1 Like

It would have to be the specific placeId.

If you have a lot of placeIDs, you can DM me separately after filling out one placeId on the sign-up sheet.

1 Like

Will we be notified of when this feature is enabled in our places?

1 Like

It has been enabled! No separate notifications will go through.

I’ll be checking the list every business day. All the requests made this weekend for which the username matches the owner / admin of the owning group, and has liked the appropriate post, has been processed.

If your place hasn’t had the feature enabled yet and you submitted a request this weekend, please re-submit.

2 Likes

Alright, thank you very much.

1 Like

Not sure if this is a scripting issue or a min max issue but my slider works as intended on screens for pc and tablet but for some reason when I go to mobile, the slider goes passed the intended min and doesn’t go up to the intended max, the Min is -.5 on x and Max on .5, The referenceui is also the slider box

1 Like