how to do moving gui like that?

[proper anchor]

i tried to do this with scrolling frame but it doesnt work properly

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local SG = ReplicatedStorage:WaitForChild("SkillsGiver")
Players = game:GetService("Players")
Player = Players.LocalPlayer
UIS = game:GetService("UserInputService")
GUI = Player.PlayerGui:WaitForChild("Skill")
local mouse = Player:GetMouse()
local lastMouseX, lastMouseY = mouse.X, mouse.Y
function Moving()
    if UIS:IsKeyDown(Enum.KeyCode.Z) then
        if math.abs(mouse.X - lastMouseX) > math.abs(mouse.Y - lastMouseY) then
            if mouse.X - lastMouseX > 0 then
                GUI.ScrollingFrame.CanvasPosition = Vector2.new(GUI.ScrollingFrame.CanvasPosition.X + (mouse.X - lastMouseX),GUI.ScrollingFrame.CanvasPosition.Y)
            else
                GUI.ScrollingFrame.CanvasPosition = Vector2.new(GUI.ScrollingFrame.CanvasPosition.X - (mouse.X - lastMouseX),GUI.ScrollingFrame.CanvasPosition.Y)
            end
        else
            if mouse.Y - lastMouseY > 0 then
                GUI.ScrollingFrame.CanvasPosition = Vector2.new(GUI.ScrollingFrame.CanvasPosition.X,GUI.ScrollingFrame.CanvasPosition.Y - (mouse.Y - lastMouseY))
            else
                GUI.ScrollingFrame.CanvasPosition = Vector2.new(GUI.ScrollingFrame.CanvasPosition.X,GUI.ScrollingFrame.CanvasPosition.Y + (mouse.Y - lastMouseY))
            end
        end
        lastMouseX, lastMouseY = mouse.X, mouse.Y
    end
end


mouse.Move:Connect(Moving)

[proper anchor]

here is my try, its only increase X of CanvasPosition, if i do same code with prints like "mouse move up" then it work good

[sand rain]

That's not a scrollingframe, that is just moving the ui, something that do some kind of this that is integrated in roblox is UIDragDetector, specially I coded one dragger for myself but start making your own idea