Draggable GUI not being dragged correctly

Help and Feedback Scripting Support
#1

  1. What do you want to achieve? Keep it simple and clear!
    I am trying to make a drag and drop system where if you hold a slot, it clones that slot and constantly sets the position to the player’s mouse position, when you let go, it destroys the cloned slot.

  2. What is the issue? Include screenshots / videos if possible!
    The cloned slot is being positioned incorrectly.
    demo:
    https://gyazo.com/b3f18866698959e0af0d9dfb90324427

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I tried modifying the part of the script that sets the position to add more pixels than its supposed to but instead, it does this:
    https://gyazo.com/9d39788082cf73ea9e059c45c1632449

script:

-- LocalScript
local UIS = game:GetService("UserInputService")
local Mouse = game.Players.LocalPlayer:GetMouse()
--
local dragging
local dragInput
local dragStart
local startPos
--
local ParentSlot-- Slot being dragged
local TargetSlot-- Slot where the item is being transferred to
--
local dragging
--


for i, v in pairs(script.Parent:GetChildren()) do
	if v:IsA('ImageButton') then
		v.InputBegan:Connect(function(input)
			if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
				local draggedSlot = v:Clone()
				draggedSlot.Parent  = script.Parent.Parent
				draggedSlot.Name = 'TemporarySlot'
				draggedSlot.Size = UDim2.new(0.134, 0 ,0.15, 0)
				
				local MouseTarget = game.Players.LocalPlayer.PlayerGui:GetGuiObjectsAtPosition(Mouse.X, Mouse.Y)
				for _, Gui in pairs(MouseTarget) do
					if Gui:IsA('ImageButton') and Gui.Parent == script.Parent then
						dragging = true
						ParentSlot = v
					end
				end
				
				dragStart = input.Position
				startPos = v.Position
				
				input.Changed:Connect(function()
					if input.UserInputState == Enum.UserInputState.End then
						draggedSlot:Destroy()
						local MouseTarget = game.Players.LocalPlayer.PlayerGui:GetGuiObjectsAtPosition(Mouse.X, Mouse.Y)
						for _, Gui in pairs(MouseTarget) do
							if Gui:IsA('ImageButton') and Gui.Parent == script.Parent then
								TargetSlot = Gui
								dragging = false
							else
								dragging = false
							end
						end
					end	
				end)
				
				
				v.InputChanged:Connect(function(input)
					if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
						dragInput = input
					end
				end)
				
				
				UIS.InputChanged:Connect(function(input)
					if input == dragInput and dragging then
						local delta = input.Position - dragStart
						draggedSlot.Position = UDim2.new(startPos.X.Scale, startPos.X.Offset + delta.X, startPos.Y.Scale, startPos.Y.Offset + delta.Y)
					end
				end)
				
				
			end
		end)
	end
end

Workspace:
image

1 Like
#2
okay nvm i see you did do this

V helped me with my own drag and drop system, I would look into this.
Draggable property is hidden on gui objects - #5 by Tiffblocks

more specifically this code here:

local function update(input)
	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

dragItemInteraction.lua (4.7 KB)
Here’s how I did it if you want to take a look :+1:
gif example

dissecting my code:

UIS.InputBegan:Connect(function(playerInput)
	if playerInput.UserInputType == Enum.UserInputType.MouseButton1 then
		local mouseLocation = playerInput.Position
		local guiDetected = playerGUI:GetGuiObjectsAtPosition(mouseLocation.X, mouseLocation.Y)
		for _, inventorySlot in pairs (guiDetected) do
			if inventorySlot.Name == "InventorySlot" then 
				if inventorySlot.ViewportFrame.itemInSlot.Value ~= "" then
					onHold = inventorySlot
					isDragging = true
					mouseStartPos = playerInput.Position
					enableItemPend(true)
				end
			end
		end
	end
end)

Don’t do this:

for i, v in pairs(script.Parent:GetChildren()) do

Use GetGuiObjectsAtPosition, it will get a table of all the guis at that mouse position, then you can loop through that table and confirm the gui’s name before dragging the gui. I’m just guessing, but I would stay away from putting Input Change inside any kind of for loop, I’m assuming this is what might be causing the problem. Just keep it outside as it’s own function.

2 Likes