Simple Module For Creating Draggable GUI Elements

  1. No, it would not clear the connections.

  2. Yes you can fix it by putting self:Disable() in the very beginning of the :Enable() function. If you do that, then running :Enable() more than once in a row shouldn’t cause any problems.

2 Likes

I love your module as I am trying to do the same thing :slight_smile:

My suggestion is: Could we not instead use one function for Enabling and disabling? something like SetDraggable(false) or true instead of using two seprate functions? thanks for supporting this commuinty with your work

And if you were wondering about my code, here it is:

--[[
	Made by AREDEUS
	03/09/20 20:42:00
	
	Info: This is a library for making your UIs Draggable

	[Short wiki]
		BDMod.SetDraggable(GGuiObject, state)
		> GuiObject needs to be a Gui object.
		> State needs to be true/false or a string with "false" or "true"
		------
		Sets the Object as Draggable in the system if true.
		------
--]]

--// Refrences and Services
local BDMod = {}
local Player = game.Players.LocalPlayer
local UserInputService = game:GetService("UserInputService")
local Mouse = Player:GetMouse()

--Modular code begins here
local DraggableGuiObjects = {} -- a table of Objects that are allowed to be dragged
local Dragging = nil -- if an object is being dragged

--/ For setting which selection input it takes


--/ Adds elements that are Draggable to the DraggableGuiObjects
function BDMod.SetDraggable(GuiObject, State)
	if type(GuiObject) == "userdata" then 
		if GuiObject.IsA and GuiObject:IsA("GuiObject") then
			if State ~= nil then
				if State == true then
				-- for checking state if it is "true"/true or "false"/false
					DraggableGuiObjects[GuiObject] = true
				elseif State == false then
					DraggableGuiObjects[GuiObject] = false
				else
					error("SetDraggable for " .. GuiObject.Name .. " state needs to be a boolean")
				end
			else
				error("Draggable State for " .. GuiObject.Name .. " in SetDraggable was not passed")
			end
		else
			error("\"" .. tostring(GuiObject) .. "\" 's class is not supported or is not a GuiObject")
		end
	else
		error("GuiObject for SetDraggable can not be " .. type(GuiObject))
	end
end

--/ Updates Dragging when a selection update has been fired
UserInputService.InputBegan:Connect(function(Input)
	if Input.UserInputType == Enum.UserInputType.MouseButton1 or Enum.UserInputType.Touch then
		local FirstGuiObject = Player.PlayerGui:GetGuiObjectsAtPosition(Input.Position.X, Input.Position.Y)[1]
		if DraggableGuiObjects[FirstGuiObject] == true then
			Dragging = FirstGuiObject
		end
	end
end)

--/ sets the Dragging to nil when a Selection input has been fired
UserInputService.InputEnded:Connect(function(Input)
	if Input.UserInputType == Enum.UserInputType.MouseButton1 or Enum.UserInputType.Touch then
		Dragging = nil
	end
end)

Mouse.Move:Connect(function()
	if Dragging ~= nil then
		-- drag object
	end
end)

--Modular code ends here
return BDMod
5 Likes

Yea, that is possible. Thanks for the suggestion :slight_smile:

2 Likes

Nice i will use this in my Game with Save Positions etc so every Player can Positioning his UI like he want

2 Likes

What happens if a GuiObject gets dragged out of sight? (are there any features that can make it come back to a visible position, or does the module prevent the GuiObject from going out of sight).

2 Likes

Currently there’s nothing that prevents it from going out of sight. You could just use checks to make sure players don’t drag it out

1 Like

I am unable to use your module script. I have followed your instructions. I have tried with a client gui and server gui as well as different gui objects. I tried putting the module script in server storage and in the workspace as well. I put a system out print message under the enable function in module script and the enable function is working. While the enable function does run, it doesn’t appear that anything else is running. Either I am doing something wrong or a recent update made this module script out of date.

Edit: The reason that it was not working was because you have to put the module script inside of the gui object you wish to drag.

THANK U THANK U THANK U

u fixed my whole script ,i swear. I spend 2 days fixing and searching

1 Like

Made a quick snippet for a way to make custom events without BindableEvents and is purely vanilla lua based with some coroutine magic, though it is your choice to use it or not. Here.

I dont understand, why you aren’t just using

GuiObject.Draggable = true
GuiObject.Active = true

This option is still working fine…

Either way, that property is deprecated.

As stated on Roblox’s wiki page, “This event, as well as its counterparts, GuiObject.DragBegin and GuiObject/Stopped , have all been deprecated. None should be used for new work.” (source)

Because its deprecated, it could be removed from the API at any point with no warnings, which will cause issues in your game if you are still using it.

1 Like

It worked fine with me without doing that. I had it in the workspace and just required that.

2 Likes

This script does not work I have a screen gui and module script and it does not work. Should I also Put in a regular script or local script?
local DraggableObject = require(game.StarterGui.ScreenGui.DraggableObject)

local FrameDrag = DraggableObject.new(game.StarterGui.ScreenGui.Frame)
FrameDrag:Enable()

LocalScript. Additionally, can you share the output logs?

I have fixed the problem so no worries.

I’m getting an error when attempting to Disable() dragging.

image

Error line:

I am making a plugin and I want to make some draggable Frames. Does this work for plugins?

1 Like

I posted Draggable GUI That Can't Go Off-Screen yesterday, and I was wondering if this might be the answer to it. Can this GUI go off-screen or does it stop once it hits the side/top/bottom of the screen?

Thank you for making this module, I’ve been using it in my game and it works well.
Except I just noticed today something disturbing with it while I was working on a custom inventory system: If you are playing a touchscreen enabled device and start touching somewhere in your screen, then hovering to the gui object, it will start dragging it, although I started touching outside of the object. It doesn’t happen with a mouse though. Here is maybe a video so you understand better:


Will you fix that or should I maybe just try to fix it myself ?

2 Likes

Is there a way to make a separate Frame move along with another frame?

Example:
Red GUI should move with yellow GUI.

image