How would i make a draggable gui without model script?

Help and Feedback Scripting Support
,
#1

Hello, i’m trying to create a organizable inventory, for this i need to drag items in inventory and i don’t know how to do this.

I searched in dev forum but all topics i found had as solution using model scripts since draggable property got deprecated, but i want to drag items with my own code.

What i need is an idea of how to set the position of a gui that’s parented to a frame with UIGridLayout to mouse position.

Any help would be appreciated.

#2

You could make the item draggable. Once the player releases the mousebutton the script checks whether the gui position is inside the inventory space. If the position is inside the inventory space it makes the gui the child of the inventory and the UIGridLayout will sort the inventory.
Hope this is what you mean.

1 Like
#3

What i mean is how to set the item gui position to mouse position

#4

This?
https://developer.roblox.com/en-us/api-reference/function/UserInputService/GetMouseLocation

#5

It worked but…

#6

Also here’s the code

itemButton.MouseButton1Down:Connect( function()
			
			local ItemFrame = itemButton.Parent
			
			ItemFrame.Parent = ItemFrame.Parent.Parent
			
			if Debounce then
				
				Debounce = false
				
				Connection = RunService.Stepped:Connect( function()

					local MousePos = UserInputService:GetMouseLocation()

					ItemFrame.Position = UDim2.fromOffset(MousePos.X, MousePos.Y)
				end)
			end
		end)
		
		itemButton.MouseButton1Up:Connect( function()
			
			Debounce = true
			
			if Connection ~= nil then
				
				Connection:Disconnect()
			end
		end)
#7

You will need to do some shenanigans, since your window does not take the whole screen.
Either:

  1. Parent the item to the main screen. You may need to resize the item, if you use scale rather than offsets.
  2. If that messes up your grid, Clone and parent the clone to the main screen while setting the original item visibility to false.
  3. If you do not want item to be draggable outside of the window, you need to recalculate Position.
    Example (assuming anchor point is set to 0,0):
ItemFrame.Position = UDim2.fromOffset(MousePos.X , MousePos.Y) - ItemFrame.Parent.Position
1 Like
#8

This is probably what you want.

#9

I think not because i tried using this and

It’s pretty slow to move and looks like this code were made to draggable gui’s in the screen, not inside a frame

#10

Also here’s the code

itemButton.InputBegan:Connect( function(Input)
			
			if Input.UserInputType == Enum.UserInputType.MouseButton1 then
				
				Dragging = true
				
				ItemFrame.Parent = ItemFrame.Parent.Parent
				
				StartDragPos = Vector2.new(Input.Position.X, Input.Position.Y)
				ItemPosition = Vector2.new(ItemFrame.Position.X.Scale, ItemFrame.Position.Y.Scale)
			end
		end)
		
		itemButton.InputEnded:Connect( function(Input)
			
			if Input.UserInputType == Enum.UserInputType.MouseButton1 then
				
				Dragging = false
			end
		end)
		
		UserInputService.InputChanged:Connect( function(Input)
			
			if Dragging then
				
				local NewPos = ItemPosition + ((Vector2.new(Input.Position.X, Input.Position.Y) - StartDragPos) / Camera.ViewportSize)
				
				ItemFrame.Position = UDim2.new(NewPos.X, 0, NewPos.Y, 0)
			end
		end)
#11

Thank you it worked!! I didn’t needed to resize the item

Edit:

How would i make this? Because i can’t subtract the itemframe.Parent.Position because it’s parent is an screen gui and if i subtract the old itemframe parent position the item goes like 500 pixels to left of my mouse.

#12

How would i make this? Because i can’t subtract the itemframe.Parent.Position because it’s parent is an screen gui and if i subtract the old itemframe parent position the item goes like 500 pixels to left of my mouse.

What I meant is, if you do not want the item to be dragged outside of the window, you need to recalculate position WITHOUT parenting the item to the ScreenGui. This is because items in the window are positioned relative to the window itself, and not the whole screen. By subtracting the window position, you can drag items without parenting them to the main screen.~

This way item will “disappear” when taken outside of window boundaries, provided ClipsDescendants property is set. Also make sure window AnchorPoint is set to 0,0; otherwise when recalculating the position you will have to take the window size into account.

1 Like