Resize and drag GUI objects using this module!

Since the deprecation of draggable property from the GUI objects, the drag became really buggy and inefficient, so I made a replacement for it.

That’s just a small module which allows making frames draggable and resizable at the same time

Here is the code:

local module = {};
module.__index = module;

if game:GetService("RunService"):IsServer() then warn("Cant be required from server"); return end

function module.Initialize(UI : Frame)
	local self = setmetatable({},module);
	self.Object = UI;
	self.Draggable = false;
	self.Resizable = false;
	self._MaxGrabDis = 5;
	self._NormalSize = UI.AbsoluteSize;
	self._NormalPosition = UI.AbsolutePosition;
	self._MinSize = Vector2.new(5,5);

	UI.Size = UDim2.new(0,UI.AbsoluteSize.X,0,UI.AbsoluteSize.Y);
	UI.Position = UDim2.new(0,UI.AbsolutePosition.X,0,UI.AbsolutePosition.Y);

	local plr = game.Players.LocalPlayer;
	local Mouse = plr:GetMouse();

	local IsDown,CanDrag = false,false;
	local X,Y = 0,0;
	local CanResizeX,CanResizeY,CanResize_X,CanResize_Y = false,false,false,false;

	Mouse.Button1Down:Connect(function()
		X,Y,IsDown = Mouse.X - UI.AbsolutePosition.X,Mouse.Y - UI.AbsolutePosition.Y,true;
		UI.Size,UI.Position = UDim2.new(0,UI.AbsoluteSize.X,0,UI.AbsoluteSize.Y),UDim2.new(0,UI.AbsolutePosition.X,0,UI.AbsolutePosition.Y);
		self._NormalSize,self._NormalPosition = UI.AbsoluteSize,UI.AbsolutePosition;
		if table.find(plr.PlayerGui:GetGuiObjectsAtPosition(Mouse.X,Mouse.Y),UI) ~= nil and true or false == true then 
			CanDrag = true; 
			if X <= self._MaxGrabDis then CanDrag = false; CanResizeX = true; else if X >= UI.AbsoluteSize.X - self._MaxGrabDis then CanDrag = false; CanResize_X = true; end end
			if Y <= self._MaxGrabDis then CanDrag = false; CanResizeY = true; else if Y >= UI.AbsoluteSize.Y - self._MaxGrabDis then CanDrag = false; CanResize_Y = true; end end
		end
	end)

	Mouse.Button1Up:Connect(function() IsDown,CanDrag,CanResizeX,CanResizeY,CanResize_X,CanResize_Y,self._NormalSize,self._NormalPosition = false,false,false,false,false,false,UI.AbsoluteSize,UI.AbsolutePosition; end)

	Mouse.Move:Connect(function()
		UI.Position = self.Draggable and (IsDown and (CanDrag and UDim2.new(0,Mouse.X - X, 0,Mouse.Y - Y) or UI.Position) or UI.Position) or UI.Position 

		if self.Resizable == true and IsDown == true then
			local X1,Y1 = Mouse.X - self._NormalPosition.X,Mouse.Y - self._NormalPosition.Y;
			local ChangeX,ChangeY = X1 - X,Y1 - Y;

			UI.Size = CanResizeX and UDim2.new(0, self._NormalSize.X - ChangeX, 0, UI.AbsoluteSize.Y) or UI.Size;
			UI.Position = CanResizeX and UDim2.new(0,self._NormalPosition.X + ChangeX,0,UI.AbsolutePosition.Y) or UI.Position;

			UI.Size = CanResizeY and UDim2.new(0, UI.AbsoluteSize.X, 0, self._NormalSize.Y - ChangeY) or UI.Size;
			UI.Position = CanResizeY and UDim2.new(0,UI.AbsolutePosition.X,0,ChangeY + self._NormalPosition.Y) or UI.Position;

			UI.Size = CanResize_X and UDim2.new(0, self._NormalSize.X + ChangeX, 0, UI.AbsoluteSize.Y) or UI.Size;
			UI.Size = CanResize_Y and UDim2.new(0, UI.AbsoluteSize.X, 0, self._NormalSize.Y + ChangeY) or UI.Size;

			UI.Size = UI.Size.Y.Offset < self._MinSize.Y and UDim2.new(0,UI.AbsoluteSize.X,0,self._MinSize.Y) or UI.Size
			UI.Position    = UI.Size.Y.Offset <= self._MinSize.Y and (CanResizeY and UDim2.new(0,UI.AbsolutePosition.X,0,self._NormalPosition.Y + self._NormalSize.Y - self._MinSize.Y) or UI.Position) or UI.Position;

			UI.Size = UI.Size.X.Offset < self._MinSize.X and UDim2.new(0,self._MinSize.X,0,UI.AbsoluteSize.Y) or UI.Size
			UI.Position = UI.Size.X.Offset <= self._MinSize.X and (CanResizeX and UDim2.new(0,self._NormalPosition.X + self._NormalSize.X - self._MinSize.X,0,UI.AbsolutePosition.Y) or UI.Position) or UI.Position;
		end
	end)

	return self
end

return module

How to enable it:

local module = require(script.Module)

local Object = module.Initialize(GUIObject)

Object.Draggable = true -- to make it draggable
Object.Resizable = true -- to make it resizable

and here is the module

Drag/Resize Module

I know that there is already replacement for the drag and the resize but I made my more clean and OOP.
Also there are some things you can customize if u want.

16 Likes

wow this seems cool,will be trying out and maybe use it in my game!

1 Like

Haven’t tried it yet but this seems very useful. I’ve actually been wanting to figure out how to make draggable UI lately. This will help alot! Thanks!

This is very gr8. Gj. Lol.

Wow great,

i was wondering if there was a way to use it like the devconsole, like that you have a small button in the corner of your ui where only that corner will scale the ui