Draggable GUI Elements Module

Introduction

Hi there! So there was a problem with the old module, which was the Signal module that I personally made. There was also a problem with how the module was structured, and it can be hard to understand for anyone who wants to configure the module. Thus, I created a new module that is more efficient and can be easily read. For any one who still wishes to use the old module the link is here.

You can find out more about the module on github.


Downloads

48 Likes

Could you possibly add screenshots and videos to the post?

3 Likes

Alright, I just added the video and the code under Example.

2 Likes

I might review the code to see if it’s applicable to the BaseAdmin mobile window, since it uses similar functionality to this.

Great module, this is definitely needed to replace the old Draggable property.

2 Likes

I love the module, and the fact to how it replaces the deprecated draggable property! Neat module, and very customisable.

One neat feature I’d love to request is perhaps: a function which enables whether the gui can go off screen or not. Meaning, automatically detect a player’s screen size, and prevent the UI being able to be dragged past those bounds to prevent UIs disappearing / being half hidden, etc.

3 Likes

Hey, I loved the idea and just implemented it in the code. It does still need more testing, because I didn’t really test it that much.

Draggable_UI:LimitScreenBoundingBox:(byParent: false?, value: boolean?)

This method restricts the dragging capability to the screen’s bounding box, which is the default. Passing in the first argument as true limits it to the parent’s bounding box. The second argument just allows you to force enable or disable the method.

Example

local DraggableUI = require(script.Parent.DraggableUI)

local InsideDraggableFrame = DraggableUI.new(script.Parent.Inside.Frame)
InsideDraggableFrame:LimitScreenBoundingBox(true)

local DraggableFrame = DraggableUI.new(script.Parent.Frame)
DraggableFrame:LimitScreenBoundingBox()

Update

  • The event handler now uses the signal module.
  • Other methods are not visible when using the module.
  • Other methods and indexes are not visible when creating a new draggable.
  • New method added LimitScreenBoundingBox
8 Likes

I love this! Thank you so much, and I’m glad the idea interested you!

This will help me, so much.

2 Likes

Sorry to be a pest! But currently I’m getting some unexpected behaviour, it works to an extent:

My screen size is: 2560 x 1440.

  • The bounding box isn’t set to a parent frame (I’ve also attempted this to try fix it)
  • I’ve tried going in a live server, same results
  • I’ve also tried to fullscreen in studio as shown in the video, etc

Sorry to be a pain!

2 Likes

Hmm, try checking your camera’s viewport frame to see if it has the same screen size.

1 Like

Odd results (studio):
image

Live game server:
image

2 Likes

Oh, I found the issue; the issue was that the code was not considering the anchor point, which offsets the pivot of the GUI element based on the value of the anchor point. I just updated the module; let me know if there is still a bug, and I will try to fix it as soon as possible.

2 Likes

No worries! Appreciate it. I’ll keep you updated, gonna try now.

EDIT: Seems to work flawlessly now.

3 Likes

This is intended. That is the server’s viewport size, not the clients.

1 Like

Issue was resolved, and I know.

1 Like

Thanks! This seems extremely useful and I will use it.

2 Likes

I’m using this module but it’s not working because whenever I move the mouse it fires Released instead of Moved, and for some reason it can’t find an object even though it’s clearly there

for i, v in pairs(slots) do
		local dragObject = DraggableUIModule.new(v.TextButton)
		v.TextButton.MouseButton1Click:Connect(function()
			inventorySlotSelected(i, v, dragObject)
		end)
		v.TextButton.TouchTap:Connect(function()
			inventorySlotSelected(i, v, dragObject)
		end)
		
		dragObject.Released:Connect(function(Position)
			if isPositionInFrame(Position, INVENTORY_UI:FindFirstChild("Slots")) then
				print("DROP!")
			else
				print("Dont Drop")
			end
			
			lastClickTick = tick()
			v.TextButton.Position = UDim2.new(0,0,0,0)
			print("Move Back")
		end)
	end
1 Like

So when it starts dragging the module sets the parent of the object to nil, so it thinks that TextButton doesn’t exist.

2 Likes

Most likely because it isn’t supported? Aren’t those mobile controls? Be more descriptive if you can, the OP is very good at adding & listening to suggestive features.

2 Likes

Mistake on my part, I messed something up but it’s fixed

2 Likes

That is quite odd behaviour, I must admit. I’m glad you resolved your issue.

1 Like