Draggable GUI That Can't Go Off-Screen

Help and Feedback Scripting Support
,
#1

I want help with making a draggable GUI but I want it to not be able to be dragged off the screen.

I’m not even sure if that’s something you can put in a script but here’s what I have so far:

local UserInputService = game:GetService("UserInputService")

local MainFrame = script.Parent
local RepositioningFrame = MainFrame:WaitForChild("TopBar")

local Camera = workspace:WaitForChild("Camera")

local DragMousePosition
local FramePosition

local Draggable = false

RepositioningFrame.InputBegan:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		Draggable = true
		DragMousePosition = Vector2.new(input.Position.X, input.Position.Y)
		FramePosition = Vector2.new(MainFrame.Position.X.Scale, MainFrame.Position.Y.Scale)
	end
end)

RepositioningFrame.InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		Draggable = false
	end
end)

UserInputService.InputChanged:Connect(function(input)
	if Draggable == true then
		local NewPosition = FramePosition + ((Vector2.new(input.Position.X, input.Position.Y) - DragMousePosition) / Camera.ViewportSize)
		MainFrame.Position = UDim2.new(NewPosition.X, 0, NewPosition.Y, 0)
	end
end)

I have tried a few things. Here’s an example with a GUI that can be dragged but can go off-screen: How to make DRAGGABLE GUIS | Roblox Tutorial - YouTube and I have also looked at developer forum posts but those are the same as the one in the video.

If anyone can help me I’d be grateful. :happy1:

1 Like
Simple Module For Creating Draggable GUI Elements
#2

You could probably clamp the position relative to the size and viewport size.

#3

I forgot to add a bit more information. The frame is bigger than the screen, it is {4, 0},{4, 0}, I want it to always be the only thing you can see. I’ll try to get you a video of what I’m talking about. Screen Recording.mov - Google Drive

Edit: If Google Drive doesn’t work, there is a lower quality video on Dropbox. Dropbox - File Deleted - Simplify your life

#4

How do you clamp a GUI? I can only find information on clamping parts.

#5

math.clamp(x number, min, max)
https://developer.roblox.com/en-us/api-reference/lua-docs/math
image

You could definitely use this function to set a limitation to how far and where the guiobject can go.

2 Likes
#6

Deleted and edited: I found this in another post, could I change some parts of it and would that then work?

function findClosestBorderPoint(x,y,Absolute)
    x = Screen.X - x
    y = Screen.Y - y
    local distanceToYBorder = math.min(y,Screen.Y-y)
    local distanceToXBorder = math.min(x,Screen.X-x)
    if distanceToYBorder < distanceToXBorder then
        if y < (Screen.Y - y) then
            return math.clamp(x,0,Screen.X-Absolute.X),0
        else
            return math.clamp(x,0,Screen.X-Absolute.X),Screen.Y - Absolute.Y
        end
    else
        if x < (Screen.X - x) then
            return 0,math.clamp(y,0,Screen.Y-Absolute.Y)
        else
            return Screen.X - Absolute.X,math.clamp(y,0,Screen.Y-Absolute.Y)
        end
    end
end
2 Likes