Setting frame position to exact mouse position

Off we start I want to mention that I know there are already plenty of discussions on this problem but I’ve gone and read most of them and none seem to work for my case. As title already suggests - I am trying to set the frame position to the exact position of mouse when player clicks (for drag and drop system)

image

All those frames are in Inventory > InventoryFrame > Items but get moved to Inventory > InventoryFrame on click because I can’t move them if they are in Inventory > InventoryFrame > Items because of UIGridLayout.

for _, item in ipairs(items) do
	local itemFrame = itemTemplate:Clone()
				
	itemFrame.Parent = script.Parent.InventoryFrame[path]
	itemFrame.ItemName.Text = item.name
	itemFrame.ItemRarity.Text = item.rarity
	itemFrame.ItemRarityColor.BackgroundColor3 = item.rarityColor
				
	itemFrame.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then
			draggable = true
			while wait() do
				if draggable then
					temFrame.Parent = script.Parent.InventoryFrame
					itemFrame.Position = UDim2.new(0, mouse.X, 0, mouse.Y) -- HERE
				else
					break
				end
			end
		end
	end)
				
	itemFrame.InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then
			draggable = false
		end
	end)
end

The current way of assigning the position work like this →

image

And the result I want to achieve is →

For the frame to be EXACTLY at the mouse position and move accordingly (Not In the middle of the top right corner)

How could this be done?

1 Like

Have you taken into account GUI Inset? That could be a possible reason.

https://developer.roblox.com/en-us/api-reference/function/GuiService/GetGuiInset

Can’t get it completely working. How do you think this should be changed using this Inset?

itemFrame.Position = UDim2.new(0, mouse.X, 0, mouse.Y)

Should be this:

local trueMousePosition = UserInputService:GetMouseLocation() - GuiService:GetGuiInset()
trueMousePosition.X, trueMousePosition.Y -- something like this I think

Taken from my viewport mouse raycasting where I found out GuiInset offsets mouse location considerably.

You made a spelling mistake (try this) :wink: :

for _, item in ipairs(items) do
	local itemFrame = itemTemplate:Clone()
				
	itemFrame.Parent = script.Parent.InventoryFrame[path]
	itemFrame.ItemName.Text = item.name
	itemFrame.ItemRarity.Text = item.rarity
	itemFrame.ItemRarityColor.BackgroundColor3 = item.rarityColor
				
	itemFrame.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then
			draggable = true
			while wait() do
				if draggable then
					itemFrame.Parent = script.Parent.InventoryFrame
					itemFrame.Position = UDim2.new(0, mouse.X, 0, mouse.Y) -- HERE
				else
					break
				end
			end
		end
	end)
				
	itemFrame.InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then
			draggable = false
		end
	end)
end

I hope that was helpful ! :yum:
Have a good day ! :grinning:

1 Like
local mousePos = userInputService:GetMouseLocation() - guiService:GetGuiInset()
itemFrame.Position = UDim2.new(0, mousePos.X, 0, mousePos.Y)

Unfortunately, it doesn’t work.

i got a module for that. And its very easy to set up

local EasyGUI = require(script.Module)

local Object = EasyGUI.Initialize(script.Parent)

Object.Draggable = true -- to make it draggable

Sadly this doesn’t work either.

After making more research this module work perfectly