How can create a inventory drag and drop system?

How can I make my inventory sytem to be able drag an item to an inventory to an down bar(quick access inventory) like the deafault backpack system work.

My inventory sytem work with a module that add ui element to interface that have an ui list layout to scale everything corretcly. I tried making my own dragging function however it didn’t worked. Here is the code for my module that handle the ui:

local Template = script.ImageButton
local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")
local InventoryLib = {} 
local Vector2_to_UDim2 = function(Vector)
    if typeof(Vector) ~= "Vector2" then error("Error in #1: Must provide a Vector2",2) end
    local VectorX = Vector.X
    local VectorY = Vector.Y
    return UDim2.fromOffset(VectorX,VectorY)
end

InventoryLib.Items = {
    Bomb = {
        ["Image"]       = "rbxassetid://16370867";
        ["Name"]        = "Bomb";
        ["Description"] = "Go boom";

    };
    Stick = {
        ["Image"]       = "rbxassetid://1091279830";
        ["Name"]        = "Stick";
        ["Description"] = "Come off of a tree" 
    };

    Rock = {
        ["Image"]       = "rbxassetid://972187391";
        ["Name"]        = "Rock";
        ["Descripiton"] = "more like lua rock"
    }

}

InventoryLib.Button = {}
InventoryLib.Button.__index = InventoryLib.Button -- https://devforum.roblox.com/t/all-about-object-oriented-programming/8585
-- @Image       | Image id of the button 
-- @Name        | Name of the button
-- @Callback    | Callback function for the button on click

InventoryLib.Button.new = function(Image,Name,Callback,Parent)
    local newButton      = Template:Clone()
    newButton.Image      = Image
    newButton.Desc.Text  = Name
    newButton.Parent     = Parent
    newButton.Activated:Connect(Callback)
    newButton.MouseEnter:Connect(function()
        newButton.Desc.Visible = true
    end)
    newButton.MouseLeave:Connect(function()
        newButton.Desc.Visible = false
    end)
    newButton.MouseButton1Down:Connect(function()
        local timeEslapsedSinceClick = tick()
        local newPos = Vector2_to_UDim2(UserInputService:GetMouseLocation())
        newButton.Position = newPos

   end)
    -- newButton.MouseButton1Up:Connect(function())
    return newButton
end
return InventoryLib

Here is how look the project files :

The problem is that the button isn’t being dragged. I did print debugging and the button position changed but the postition did not changed on the display.

1 Like

This could be due to the UI layouts? I believe they change the position and size. You may have to edit them in your script, or mess around with the order of your buttons in your script, because UI layouts work based on the button and the order that they’re put in.

1 Like