How Do I Make Draggable UI Elements In A Roblox Plugin

[ignrazor (rzr)]

In my plugin, I want to be able to drag UI elements, since “Draggable” was removed from the properties tab. I searched through the documentation for PluginMouse, but I’m still unsure of how I would go about this.

[Inconcludable]

The Draggable property isn’t exactly removed, but it’s been hidden because of the reasons in this post. However, in the post, there’s also a implementation of draggable UI. Try using that.

Draggable property is hidden on gui objects

It’s never worked very well, and it’s not very flexible. You can’t implement behaviors like snapping or constraints using it, and when you decide you need those, your only option is to rewrite it from scratch. The concept of clicking and dragging is also foreign for gamepad controls, so relying on them in your UX is kind of bad. Here’s a snippet which actually works better than the Draggable property ever did. local UserInputService = game:GetService("UserInputService") local gui = script.Par…

[ignrazor (rzr)]

I’ve already tried using InputService, but that doesn’t seem to work with plugins, at least for the mouse.

[Inconcludable]

Try modifying it with PluginMouse. It’s the same as a normal mouse instance for the most part, and the dragging logic should be ported over fairly easily.

[ignrazor (rzr)]

PluginMouse works in the viewport not in the plugin window itself (it’s a dock widget)

[p49p0 (Panthera)]

idk specifically what u want, if u want to make a uiobject draggable just do

ui.Selectable = true
ui.Draggable = true

[ignrazor (rzr)]

“Draggable” has been deprecated therefore it no longer works

[Inconcludable]

Deprecated doesn’t mean something doesn’t work, it just means it’s no longer maintained and MIGHT not work. It’s worth a try, since you’re probably not going to care about the constraints you have to stay within with Draggable.

[p49p0 (Panthera)]

just tested and it for real doesn’t work.

[ignrazor (rzr)]

Yeah, i tested it before I commented, and it doesn’t work.

[zahra_y735 (Zahra_y)]

The best way to make draggable UI elements in a Roblox plugin is to use the PluginMouse object. This object allows you to detect mouse events such as mouse clicks, mouse movement, and mouse dragging. You can use the MouseButton1Down and MouseButton1Up events to detect when the user has clicked and released the mouse button, and then use the MouseMoved event to detect when the user is dragging the UI element. You can then use this information to update the position of your UI element accordingly.

[Xsticcy]

Hi!

Sorry for being late

It’s actually not that hard to do!
The code is different for widgets and for core gui.

This function will work if you are using Core Gui, to make it work for widgets you need to apply slight changes, read about them below the function code.

local function makeDraggable(object) -- object must be a UI object!

	local function mousePos()
		local mouse = plugin:GetMouse()
		return Vector2.new(mouse.X, mouse.Y)
	end

	local draggingConnection

	local previousMousePosition

	object.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then

			previousMousePosition = mousePos()

			draggingConnection = game["Run Service"].RenderStepped:Connect(function()

				local movement = mousePos() - previousMousePosition
				object.Position += UDim2.fromOffset(movement.X, movement.Y)

				previousMousePosition = mousePos()
			end)

		end
	end)

	object.InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then

			if draggingConnection then
				draggingConnection:Disconnect()
			end

		end
	end)
end

If you are using a widget, replace the mousePos function with this function:

local function mousePos()
	return yourWidgetVariable:GetRelativeMousePosition()
end

---

Otherwise, just use the function above in your code.

You can apply dragging to an object like this:

makeDraggable(yourGuiObjectHere)

Tell me if you have any questions/problems!