Introducing UIDragDetectors [Studio-only Beta]

Updates Announcements
#87

How did you do that? I’m currently trying to make something like that, but cant make anything move if its sibling is any of the UILayout instances (grid, list, table). Pulling my hair because it’s just not dragging at all.

1 Like
#88

This will be amazing to use in VR games!! not saying i don’t have one on the very short horizon!

1 Like
#89

omg :DDDDDD thanks ROBLOX!!! :DDDDDDDDDDDDDDDDDDDDDDDDD
probably one of the best UI updates ever because I remember the Draggable bool value was removed now I am so happy it’s back!!!

good job ROBLOX!!! :D:D:D:D::D:DDD :DDDDDDDDDDDD

and yea keep up good updates. :)

2 Likes
#90

First, what I did is I made an array that defines OccupiedTiles. This can be done using a for i Loop for the X and the Y axis. (also worth nothing this isn’t using any UI ordering instances such as UIListLayout, UIGridLayout, etc.)

local Grid = {}
local xAmount: number = 2
local yAmount: number = 2

for x = 1, xAmount do
   for y = 1, yAmount do
      --this is where you would want to check Tile size, how big an object is, etc.
      table.insert(Grid, Vector2.new(x, y))
   end
end

On DragStart I save the previous position of the object (this could really be done in many ways, but this is what I did to test out the UIDragDetector).

Then on DragEnd I create a Position that snaps to the nearest tile. However, before applying the changes to it, I check if the tiles it’s trying to go to are unoccupied. If the tiles are unoccupied then it will be placed to the given position, otherwise it will just return to its previous position.

Also worth nothing as the original post says, a current issue is that UIDragDetectors seem to be blocking some common UI events from firing, such as MouseButton1Click.

Also I added a few more functionalities with it while testing further so here’s an updated version of it.

7 Likes
#91

I have some problems with the frame resizing it doesn’t work in my plugin what should cuz it is in studio but the drag cursor disappear when you try to drag and not resize @DeFactoCepti @PrinceTybalt

2 Likes
#92

Can’t wait for this to release it’s amazing

I wonder if its possible to make UI resizing easier with this

4 Likes
#93

Slightly off-topic, but this made me realize that TextButtons and such should also have properties for cursor images.

7 Likes
#94

currently I manually move ui elements around by detecting mouse button input and moving the ui over to the mouse position. would it be better or worse to use this new object in the name of performance?

2 Likes
#95

They are currently not supported, but our current plan is for UIDragDetectors to swap the LayoutOrder when dragged & dropped over another GuiObject that’s affected by the same Layout-- this behavior should be togglable.

For Layouts that don’t use LayoutOrder, you would need to implement a custom behavior.

6 Likes
#96

I’m guessing this is the SurfaceGui contents ported over to a ScreenGui, adding the UIScale?

I will look into this :slight_smile: thank you!

6 Likes
#97

I will look into this! Thank you for the report

4 Likes
#98

We will be replying to this thread and edit the title & contents when it’s live on Client!

5 Likes
#99

That’s interesting-- haven’t run into that myself personally.

Do you have a .rbxm of the frame / screenGui you’re using that reproduces this consistently? I’ll try to figure out why that is happening.

4 Likes
#100

The black circle has been reported-- we will fix it!

The Test Place UI wasn’t quite designed with the mobile in mind, and I’ll try to make it better.

Regarding the resizing-- the behavior is done through lua script responses in the drag response events, and you can find the corresponding model in the test place with the name “Offset Scale And Resize”.

5 Likes
#101

This is great! Another great tool to UIs to make creating them easy

…now when will we stop having to script the AutomaticCanvasSize property :sweat_smile::sweat_smile: AutomaticCanvasSize should take into account padding

4 Likes
#102

Thank you for this new feature, you now do not have to implement your own system to achieve the same result, and is beginner-friendly.

3 Likes
#103

You could do two things:

  1. Create a smaller parent that takes up the area that you want to drag, and have the UIDragDetector parented by that.
  2. Set the ResponseStyle to custom (For this case, CustomOffset is probably the one you want). On DragStart, store the position of the UI you want to move. On DragContinue, set the position of the UI you want to move as its initial position + the DragUDim2 of the UIDragDetector you’re using.

Constraint functions could work for this, too, but it would be doing the same thing as #2, and harder to set up.

Let me know if that works for you!

Edit: I suppose another hack could be that if your input on DragStart isn’t within a certain area (calculated by X/Y, over some Gui, etc), you could stop the drag by setting Enabled to false, then immediately re-enable for further drags. That’s not a pretty solution, though

1 Like
#104

The cursor issue is known! A fix has been made & will be applied in two weeks.

5 Likes
#105

There are known issues with cursors at the moment-- a fix should be incoming.

As for resizing, it’s expected to not work in edit mode, as it’s done by scripting on the events. It would only work in play mode.

2 Likes
#106

Interesting-- we’ll definitely be looking into performance enhancements over time, but hopefully it’s not too big of an issue at the current state.

@mantorok4866 As shown by @XenoDenissboss1 , there does seem to be possible performance effects. If your custom dragger is simple in logic, it’s definitely possible to be better in performance.

We will be improving upon this over time.

3 Likes