Smooth UI Dragging

Help and Feedback Scripting Support
#1

Hey developers, I wanna try to get an effect where when you drag a frame it looks smoother. As you know current dragging frames look like this:

https://gyazo.com/9bdce72b6fba002254c1f949342a551c

with simple code:

frame = script.Parent
frame.Draggable = true
frame.Active = true
frame.Selectable = true

and basically, I’ve come across games with really smooth dragging and it creates a nice effect.
I was wondering how I can achieve something similar.

1 Like
#2

TweenService is your friend. Luckily I was also wondering how to achieve this and I have some tips that can help.

Code

-- I won't give the whole thing as I want you to learn from it instead of just using without understanding

--Services
local UserInputService = game:GetService('UserInputService') -- These are the services needed
local TweenService = game:GetService('TweenService')
local RunService = game:GetService('RunService') -- Needed for the function. Optional tbh
local TweenInfo = TweenInfo.new() -- whatever you need
local Frame = --whatever you have it as maybe script.Parent
function Drag()
   local Mouse = UserInputService:GetMouseLocation() -- Get the mouse from the player
   local Position = {Position = UDim2.new(0, Mouse.X - Frame.AbsolutePosition.X / Frame.AbsoluteSize.X, 0, Mouse.Y - Frame.AbsolutePosition.Y / Frame.AbsoluteSize.Y, 0)}
   local Tween = TweenService:Create(Frame, TweenInfo, Position)
end

-- Then use this function with frame.MouseEnter or userinputservice to detect the mousebutton1 is being held down when it's inside the frame
Frame.MouseEnter:Connect(function()
  UserInputService.InputBegan:Connect(function(input)
    if input.UserInputType == Enum.UserInputType.MouseButton1 then
         -- BindToRenderStep the Drag function
    end
  end)
end)

-- Unbind it

Edit: Forgot to divide the absolute size whoops. We divide because that’s how you can get the frame in the somewhat center of the mouse position. Also added in another function mentioned in the code. It’s optional but just added it in.

1 Like
#3

You need to introduce your own system with TweenService and Mouse / UserInputService

#4

Or you can use Mouse.Moved, should be more efficient than BindToRenderStep