Introducing UIDragDetectors [Studio-only Beta]

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

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

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

3 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

Technically already made a thread on this but is this draggable instance intended to end up very slightly offset from it’s container for no apparent reason? (The object is dead-center on start)
image
image

1 Like

Do you have a model you can share? There was an issue with insets that should have been fixed, but this may be a new one.

(+ Devices used if possible!)

1 Like

Which object are you talking about? I’m not sure which one is being depicted

1 Like

I have a uidragdetector hooked up to an imagelabel, placed in a bounding frame with a scale response style

Can’t tell if it being able to “overshoot” is intentional or not

1 Like