How to make drag and drop mechanics

Help and Feedback Scripting Support
,
1

I’ve been trying to figure this out for so long, my main issue is that whenever the mouse is hovering over a Gui object like my other hotbar slot the mousebutton isn’t detected. If my mouse is not hovering over any gui object it resets itselfs as it should.

Code that concerns the drag and drop mechanics:

function Inventory.InputEnded(inputObject: InputObject)	
	if inputObject.UserInputType == Enum.UserInputType.MouseButton1 and DragItemData ~= nil then
		
		local MousePosition = GetMousePosition()
		local GuiObjects = PlayerGui:GetGuiObjectsAtPosition(MousePosition.X, MousePosition.Y)

		for _, object in pairs(GuiObjects) do
			if object.Parent.Name == "Container" and object:FindFirstChild("ViewportFrame") then
				InsertSlot(DragItemData[1], DragItemData[2], object)
			end
		end
		
		local SelectionPort = Hotbar:FindFirstChild("SelectionPort")
		DragItemData = nil
		if SelectionPort then SelectionPort:Destroy() end
		
		return
	end
end

for i, slot: TextButton in pairs(InputIndexTable) do
	slot.Button.MouseEnter:Connect(function()
		SlotHovering = slot
	end)
	
	slot.Button.MouseLeave:Connect(function()
		SlotHovering = nil
	end)
	
	slot.Button.MouseButton1Down:Connect(function()
		if slot.Amount == 0 then return end
		if slot:GetAttribute("Item") == "" then return end
		
		mouse1Down = true
		DragItemData = {slot:GetAttribute("Item"), slot:GetAttribute("Amount"), slot}

		local ViewPortFrame = Instance.new("ViewportFrame", Hotbar)
		local WorldModel = Instance.new("WorldModel", ViewPortFrame)
		ViewPortFrame.Name = "SelectionPort"

		local itemModel = Furniture[DragItemData[1]]:Clone()
		itemModel.Parent = WorldModel
		itemModel:PivotTo(CFrame.new(Vector3.new(0, -2, -7.5), Vector3.new(0, -4, 0)) * CFrame.Angles(0, math.rad(45), 0))

		ViewPortFrame:SetAttribute("OriginalSlot", slot.Name)
		ViewPortFrame.Parent = Hotbar
		ViewPortFrame.Size = UDim2.fromScale(0.1, 0.1)
		ViewPortFrame.BackgroundTransparency = 1
		
		DragConnection = RUN_SERVICE.RenderStepped:Connect(function()
			local MousePosition = GetMousePosition()

			ViewPortFrame.Position = UDim2.fromOffset(MousePosition.X, MousePosition.Y)
		end)
	end)
end

local function GetMousePosition()
	local TopLeft, BottomRight = GUI_SERVICE:GetGuiInset()
	return USER_INPUT_SERVICE:GetMouseLocation() - TopLeft
end

Hotbar set up:

image
image230×432 6.77 KB

2

Out of curiosity, have you tried using the UiDragDetector yet? It is a class that allows you to easily implement drag and drop elements into UIs.
UIDragDetector | Documentation - Roblox Creator Hub

It has the ability to also tell you where the user began dragging and finished dragging the UI, which could be useful to you.

1 Like
3

Yes I did start using this after creating this post. However, the downside of it is that I can not make my grid buttons clickable to be selected because of it.