How to stop movement after mouse is released of UI

I’ve been working on this new thing where you can move a UIElement with the cursor it works but when I release the mouse it still moves and I’ve been trying for 1 hour but failed.

Program

local Mouse = player:GetMouse()

local UserInputService = game:GetService("UserInputService")

    function MouseMove(Action)
    	print(Action)
    	Mouse.Move:Connect(function()
    		if Action == "Connect" then
    			MoveUI(Mouse.X, Mouse.Y)
    		elseif Action == "Disconnect" then
    			MoveUI("Stop")
    		end
    	end)
    end

    function MoveUI(XX, YY)
    	if XX == "Stop" then
    		print("Stopp")
    	else
    		script.Parent.UI.Controls.Layout.Fire.Position = UDim2.new(0, XX, 0, YY - script.Parent.UI.Controls.Layout.AbsolutePosition.Y)
    	end
    end
    	
    script.Parent.UI.Controls.Layout.Fire.MouseButton1Down:Connect(function()
    	MouseMove("Connect")
    end)


    script.Parent.UI.Controls.Layout.Fire.MouseButton1Up:Connect(function()
    	print("up")
    	MouseMove("Disconnect")
    end)

You need to store the Mouse Move connection at a global scope so you can disconnect it.

local Mouse = player:GetMouse()

local UserInputService = game:GetService("UserInputService")
local connection

function MouseMove(Action)
    print(Action)
    connection = Mouse.Move:Connect(function()
    	if Action == "Connect" then
    		MoveUI(Mouse.X, Mouse.Y)
    	elseif Action == "Disconnect" then
    		MoveUI("Stop")
    	end
    end)
end

function MoveUI(XX, YY)
    if XX == "Stop" then
    	print("Stopp")
        connection:Disconnect()
    else
    	script.Parent.UI.Controls.Layout.Fire.Position = UDim2.new(0, XX, 0, YY - script.Parent.UI.Controls.Layout.AbsolutePosition.Y)
    end
end
    	
script.Parent.UI.Controls.Layout.Fire.MouseButton1Down:Connect(function()
    MouseMove("Connect")
end)


script.Parent.UI.Controls.Layout.Fire.MouseButton1Up:Connect(function()
    print("up")
    MouseMove("Disconnect")
end)

So basically, You’re trying to make a draggable GUI? If yes, try using this;

-- Your script has a few unnecessary functions
local Mouse = game.Players.LocalPlayer:GetMouse()
local Dragging = false

local YourGui = script.Parent -- Change path to wherever your GUI is located.


Mouse.Move:Connect(function()
	if Dragging then
		YourGui.Position = UDim2.fromOffset(Mouse.X, Mouse.Y)
	end
end)


YourGui.MouseButton1Down:Connect(function()
	Dragging = true
end)


YourGui.MouseButton1Up:Connect(function()
	Dragging = false
end)
-- So basically, all this does is every time the mouse moves, it checks if the 'Dragging' variable is set to true. If it is true; it sets the GUI's position to the mouse' position.

.
.
Or if you want to try a slightly different way, You can do this;

-- Services
local UserInputService = game:GetService("UserInputService")

-- Variables
local gui = script.Parent -- Change path to wherever your GUI is located.

local dragging = false
local dragInput -- Enum.UserInputType
local dragStart -- Mouse position
local startPos -- GUI's position
--

gui.InputBegan:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		dragging = true
		dragStart = input.Position
		startPos = gui.Position

		input.Changed:Connect(function()
			if input.UserInputState == Enum.UserInputState.End then
				dragging = false
			end
		end)
	end
end)

gui.InputChanged:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
		dragInput = input
	end
end)

UserInputService.InputChanged:Connect(function(input)
	if input == dragInput and dragging then
		local delta = input.Position - dragStart
		gui.Position = UDim2.new(startPos.X.Scale, startPos.X.Offset + delta.X, startPos.Y.Scale, startPos.Y.Offset + delta.Y)
	end
end)
-- This one is mobile compatible
1 Like