Home / Edit Drag and Drop for VGUI

Log in to edit

Drag and Drop for VGUI

<cat>Dev.UI</cat>
# Drag 'N' Drop
This is a drag n drop tutorial since it barely documented.

It's very easy, all you need to have is have two panels; receiver and droppable panel.

```
local receiver = vgui.Create('DPanel')
receiver:SetSize( ScrW() / 2, ScrH() / 2 )

local droppable = vgui.Create('DPanel')
droppable:SetSize( 100, 100 )
```


Now we need to assign receiver and droppable functions for the panels

```
receiver:Receiver( 'name', function( receiver, tableOfDroppedPanels, isDropped, menuIndex, mouseX, mouseY ) end,{})
droppable:Droppable( 'name' )
```

Receiver metamethod takes three arguments, first one being the name of the DnD so it can receiver all droppable panels that have the same name as the receiver, callback function which gets executed as soon as a droppable panel is hovered over the receiver (if you want to detect it as soon as it was dropped, use isDropped argument) and last one is a table of strings that will act as a menu if drag'n'drop was performed with a right click.

Use the callback function for your stuff, setting position of the dropped panel or whatever you wanted to do.

Check <page>Panel:Receiver</page> for more information about the receiver metamethod.

The droppable method only takes one argument and it's the name of the receiver you want to drop it on.

More information at <page>Panel:Droppable</page>

Now you're able to drop droppable onto receiver.

Garry's Mod Wiki

Player Guides

Getting Started 13

Sandbox Tools 3

Game Modes 4

Server Hosting 9

Other Topics 7

Developer Guides

Getting Started 10

Lua Programming 25

Game Systems 10

Gamemode Creation 6

HUD and User Interface 15

Scripted Entities and Weapons 9

NPCs and AI 2

Map and Level Design 3

Models, Textures and Animation 6

Addons and Steam Workshop 4

Binary Modules 5

Other Topics 12

Developer Reference

Globals 327

Classes 45

Libraries 88

achievements
- BalloonPopped
- Count
- EatBall
- GetCount
- GetDesc
- GetGoal
- GetName
- IncBaddies
- IncBystander
- IncGoodies
- IsAchieved
- Remover
- SpawnedNPC
- SpawnedProp
- SpawnedRagdoll
- SpawnMenuOpen
ai
ai_schedule
- New
ai_task
- New
baseclass
- Get
- Set
bit
- arshift
- band
- bnot
- bor
- bswap
- bxor
- lshift
- rol
- ror
- rshift
- tobit
- tohex
cam
- ApplyShake
- End
- End2D
- End3D
- End3D2D
- EndOrthoView
- GetModelMatrix
- IgnoreZ
- PopModelMatrix
- PushModelMatrix
- Start
- Start2D
- Start3D
- Start3D2D
- StartOrthoView
chat
- AddText
- Close
- GetChatBoxPos
- GetChatBoxSize
- Open
- PlaySound
cleanup
- Add
- CC_AdminCleanup
- CC_Cleanup
- GetList
- GetTable
- Register
- ReplaceEntity
- UpdateUI
concommand
- Add
- AutoComplete
- GetTable
- Remove
- Run
constraint
construct
- Magnet
- SetPhysProp
controlpanel
- Clear
- Get
cookie
- Delete
- GetNumber
- GetString
- Set
coroutine
- create
- isyieldable
- resume
- running
- status
- wait
- wrap
- yield
cvars
debug
- debug
- getfenv
- gethook
- getinfo
- getlocal
- getmetatable
- getregistry
- getupvalue
- setfenv
- sethook
- setlocal
- setmetatable
- setupvalue
- Trace
- traceback
- upvalueid
- upvaluejoin
debugoverlay
- Axis
- Box
- BoxAngles
- Cross
- EntityTextAtPosition
- Grid
- Line
- ScreenText
- Sphere
- SweptBox
- Text
- Triangle
derma
dragndrop
draw
- DrawText
- GetFontHeight
- NoTexture
- RoundedBox
- RoundedBoxEx
- SimpleText
- SimpleTextOutlined
- Text
- TextShadow
- TexturedQuad
- WordBox
drive
- CalcView
- CreateMove
- DestroyMethod
- End
- FinishMove
- GetMethod
- Move
- PlayerStartDriving
- PlayerStopDriving
- Register
- Start
- StartMove
duplicator
effects
- BeamRingPoint
- Bubbles
- BubbleTrail
- Create
- GetList
- Register
engine
ents
file
- Append
- AsyncRead
- CreateDir
- Delete
- Exists
- Find
- IsDir
- Open
- Read
- Rename
- Size
- Time
- Write
frame_blend
game
gameevent
- Listen
gamemode
- Call
- Get
- Register
gmod
- GetGamemode
gmsave
gui
GWEN
halo
hammer
- SendCommand
hook
- Add
- Call
- GetTable
- Remove
- Run
http
- Fetch
- Post
input
jit
- opt
  - start
- util
  - funcbc
  - funcinfo
  - funck
  - funcuvname
  - ircalladdr
  - traceexitstub
  - traceinfo
  - traceir
  - tracek
  - tracemc
  - tracesnap
- arch
- os
- version
- version_num
- attach
- flush
- off
- on
- status
killicon
- Add
- AddAlias
- AddFont
- AddTexCoord
- Draw
- Exists
- GetSize
- Render
language
- Add
- GetPhrase
list
- Add
- Contains
- Get
- GetForEdit
- GetTable
- HasEntry
- Set
markup
- Color
- Escape
- Parse
math
- ease
  - InBack
  - InBounce
  - InCirc
  - InCubic
  - InElastic
  - InExpo
  - InOutBack
  - InOutBounce
  - InOutCirc
  - InOutCubic
  - InOutElastic
  - InOutExpo
  - InOutQuad
  - InOutQuart
  - InOutQuint
  - InOutSine
  - InQuad
  - InQuart
  - InQuint
  - InSine
  - OutBack
  - OutBounce
  - OutCirc
  - OutCubic
  - OutElastic
  - OutExpo
  - OutQuad
  - OutQuart
  - OutQuint
  - OutSine
- huge
- pi
- tau
- abs
- acos
- AngleDifference
- Approach
- ApproachAngle
- asin
- atan
- atan2
- BinToInt
- BSplinePoint
- calcBSplineN
- ceil
- CHSpline
- Clamp
- cos
- cosh
- CubicBezier
- deg
- Dist
- Distance
- DistanceSqr
- EaseInOut
- exp
- Factorial
- floor
- fmod
- frexp
- IntToBin
- ldexp
- log
- log10
- max
- min
- mod
- modf
- NormalizeAngle
- pow
- QuadraticBezier
- rad
- Rand
- random
- randomseed
- Remap
- Round
- sin
- sinh
- SnapTo
- sqrt
- tan
- tanh
- TimeFraction
- Truncate
matproxy
- ActiveList
- ProxyList
- Add
- Call
- Init
- ShouldOverrideProxy
menu
- RecordFrame
menubar
- Init
- IsParent
- ParentTo
mesh
- AdvanceVertex
- Begin
- Color
- End
- Normal
- Position
- Quad
- QuadEasy
- Specular
- TangentS
- TangentT
- TexCoord
- UserData
- VertexCount
motionsensor
navmesh
net
- ReadVars
- Receivers
- WriteVars
- Abort
- Broadcast
- BytesLeft
- BytesWritten
- Incoming
- ReadAngle
- ReadBit
- ReadBool
- ReadColor
- ReadData
- ReadDouble
- ReadEntity
- ReadFloat
- ReadHeader
- ReadInt
- ReadMatrix
- ReadNormal
- ReadPlayer
- ReadString
- ReadTable
- ReadType
- ReadUInt
- ReadUInt64
- ReadVector
- Receive
- Send
- SendOmit
- SendPAS
- SendPVS
- SendToServer
- Start
- WriteAngle
- WriteBit
- WriteBool
- WriteColor
- WriteData
- WriteDouble
- WriteEntity
- WriteFloat
- WriteInt
- WriteMatrix
- WriteNormal
- WritePlayer
- WriteString
- WriteTable
- WriteType
- WriteUInt
- WriteUInt64
- WriteVector
notification
numpad
- Activate
- Deactivate
- FromButton
- OnDown
- OnUp
- Register
- Remove
- Toggle
os
- clock
- date
- difftime
- time
package
- loaded
- seeall
permissions
- AskToConnect
- Connect
- EnableVoiceChat
- GetAll
- Grant
- IsGranted
- Revoke
physenv
player
- CreateNextBot
- GetAll
- GetBots
- GetByAccountID
- GetByID
- GetBySteamID
- GetBySteamID64
- GetByUniqueID
- GetCount
- GetHumans
- Iterator
player_manager
presets
- Add
- BadNameAlert
- Exists
- GetTable
- OverwritePresetPrompt
- Remove
- Rename
properties
render
resource
saverestore
- AddRestoreHook
- AddSaveHook
- LoadEntity
- LoadGlobal
- PreRestore
- PreSave
- ReadTable
- ReadVar
- SaveEntity
- SaveGlobal
- WritableKeysInTable
- WriteTable
- WriteVar
scripted_ents
- Alias
- Get
- GetList
- GetMember
- GetSpawnable
- GetStored
- GetType
- IsBasedOn
- OnLoaded
- Register
search
- AddProvider
- GetResults
serverlist
sound
- Add
- AddSoundOverrides
- EmitHint
- Generate
- GetLoudestSoundHint
- GetProperties
- GetTable
- Play
- PlayFile
- PlayURL
spawnmenu
sql
- Begin
- Commit
- IndexExists
- LastError
- Query
- QueryRow
- QueryValue
- SQLStr
- TableExists
steamworks
string
- byte
- CardinalToOrdinal
- char
- Comma
- dump
- EndsWith
- Explode
- find
- format
- FormattedTime
- FromColor
- GetChar
- GetExtensionFromFilename
- GetFileFromFilename
- GetPathFromFilename
- gfind
- gmatch
- gsub
- Implode
- Interpolate
- JavascriptSafe
- Left
- len
- lower
- match
- NiceSize
- NiceTime
- PatternSafe
- rep
- Replace
- reverse
- Right
- SetChar
- Split
- StartsWith
- StartWith
- StripExtension
- sub
- ToColor
- ToMinutesSeconds
- ToMinutesSecondsMilliseconds
- ToTable
- Trim
- TrimLeft
- TrimRight
- upper
surface
system
- AppTime
- BatteryPower
- FlashWindow
- GetCountry
- HasFocus
- IsLinux
- IsOSX
- IsWindowed
- IsWindows
- SteamTime
- UpTime
table
- Add
- ClearKeys
- CollapseKeyValue
- concat
- Copy
- CopyFromTo
- Count
- DeSanitise
- Empty
- FindNext
- FindPrev
- Flip
- ForceInsert
- foreach
- foreachi
- GetFirstKey
- GetFirstValue
- GetKeys
- GetLastKey
- GetLastValue
- getn
- GetWinningKey
- HasValue
- Inherit
- insert
- IsEmpty
- IsSequential
- KeyFromValue
- KeysFromValue
- LowerKeyNames
- maxn
- MemberValuesFromKey
- Merge
- move
- Pack
- Random
- remove
- RemoveByValue
- Reverse
- Sanitise
- Shuffle
- sort
- SortByKey
- SortByMember
- SortDesc
- ToString
team
- AddScore
- BestAutoJoinTeam
- GetAllTeams
- GetClass
- GetColor
- GetName
- GetPlayers
- GetScore
- GetSpawnPoint
- GetSpawnPoints
- Joinable
- NumPlayers
- SetClass
- SetColor
- SetScore
- SetSpawnPoint
- SetUp
- TotalDeaths
- TotalFrags
- Valid
timer
- Adjust
- Check
- Create
- Destroy
- Exists
- Pause
- Remove
- RepsLeft
- Simple
- Start
- Stop
- TimeLeft
- Toggle
- UnPause
umsg
- Angle
- Bool
- Char
- End
- Entity
- Float
- Long
- PoolString
- Short
- Start
- String
- Vector
- VectorNormal
undo
- AddEntity
- AddFunction
- Create
- Do_Undo
- Finish
- GetTable
- MakeUIDirty
- ReplaceEntity
- SetCustomUndoText
- SetPlayer
- SetupUI
usermessage
utf8
- charpattern
- char
- codepoint
- codes
- force
- GetChar
- len
- offset
- sub
util
vgui
video
- Record
weapons
- Get
- GetList
- GetStored
- IsBasedOn
- OnLoaded
- Register
widgets
- PlayerTick
- RenderMe

Hooks 10

Game Events 38

Panels 128

ContentHeader
- OpenMenu
- ToTable
ContentIcon
ContentSidebar
ContextBase
ControlPanel
ControlPresets
DAdjustableModelPanel
DAlphaBar
DBinder
DBubbleContainer
- OpenForPos
DButton
DCategoryList
- Add
- AddItem
- UnselectAll
DCheckBox
- OnChange
- GetChecked
- IsEditing
- SetChecked
- SetValue
- Toggle
DCheckBoxLabel
- OnChange
- GetChecked
- GetIndent
- SetBright
- SetChecked
- SetConVar
- SetDark
- SetFont
- SetIndent
- SetTextColor
- SetValue
- Toggle
DCollapsibleCategory
DColorButton
- GetColor
- GetDrawBorder
- GetID
- GetSelected
- IsDown
- SetColor
- SetDrawBorder
- SetID
DColorCombo
DColorCube
- OnUserChanged
- GetBaseRGB
- GetHue
- GetRGB
- SetBaseRGB
- SetColor
- SetHue
- SetRGB
- TranslateValues
- UpdateColor
DColorMixer
- ValueChanged
- ConVarThink
- DoConVarThink
- GetAlphaBar
- GetColor
- GetConVarA
- GetConVarB
- GetConVarG
- GetConVarR
- GetPalette
- GetVector
- GetWangs
- SetAlphaBar
- SetBaseColor
- SetColor
- SetConVarA
- SetConVarB
- SetConVarG
- SetConVarR
- SetLabel
- SetPalette
- SetVector
- SetWangs
- UpdateColor
- UpdateConVar
- UpdateConVars
DColorPalette
DColumnSheet
DComboBox
DDragBase
DDrawer
- Close
- GetOpenSize
- GetOpenTime
- Open
- SetOpenSize
- SetOpenTime
- Toggle
DEntityProperties
DExpandButton
- GetExpanded
- SetExpanded
DFileBrowser
- OnDoubleClick
- OnRightClick
- OnSelect
- Clear
- GetBaseFolder
- GetCurrentFolder
- GetFileTypes
- GetFolderNode
- GetModels
- GetName
- GetOpen
- GetPath
- GetSearch
- SetBaseFolder
- SetCurrentFolder
- SetFileTypes
- SetModels
- SetName
- SetOpen
- SetPath
- SetSearch
- Setup
- SetupFiles
- SetupTree
- ShowFolder
- SortFiles
DForm
- AddItem
- Button
- CheckBox
- ComboBox
- ControlHelp
- GetAutoSize
- GetSpacing
- Help
- ListBox
- NumberWang
- NumSlider
- PanelSelect
- PropSelect
- Rebuild
- SetAutoSize
- SetName
- SetSpacing
- TextEntry
DFrame
DGrid
- AddItem
- GetCols
- GetColWide
- GetItems
- GetRowHeight
- RemoveItem
- SetCols
- SetColWide
- SetRowHeight
- SortByMember
DHorizontalDivider
- GetDividerWidth
- GetDragging
- GetHoldPos
- GetLeft
- GetLeftMin
- GetLeftWidth
- GetMiddle
- GetRight
- GetRightMin
- SetDividerWidth
- SetDragging
- SetHoldPos
- SetLeft
- SetLeftMin
- SetLeftWidth
- SetMiddle
- SetRight
- SetRightMin
- StartGrab
DHorizontalScroller
DHScrollBar
- AddScroll
- AnimateTo
- BarScale
- GetHideButtons
- GetOffset
- GetScroll
- Grip
- SetHideButtons
- SetScroll
- SetUp
DHTML
DHTMLControls
DIconBrowser
DIconLayout
DImage
DImageButton
DKillIcon
- GetName
- SetName
DLabel
DLabelEditable
DLabelURL
DListBox
DListBoxItem
DListView
DListView_Column
DListView_Line
- OnRightClick
- OnSelect
- DataLayout
- GetAltLine
- GetColumnText
- GetID
- GetListView
- GetSortValue
- GetValue
- IsLineSelected
- SetAltLine
- SetColumnText
- SetID
- SetListView
- SetSelected
- SetSortValue
- SetValue
DMenu
DMenuBar
DMenuOption
- AddSubMenu
- GetChecked
- GetIsCheckable
- GetMenu
- GetRadio
- OnChecked
- SetChecked
- SetIsCheckable
- SetMenu
- SetRadio
- SetSubMenu
- ToggleCheck
DMenuOptionCVar
DModelPanel
- LayoutEntity
- PostDrawModel
- PreDrawModel
- DrawModel
- GetAmbientLight
- GetAnimated
- GetAnimSpeed
- GetCamPos
- GetColor
- GetEntity
- GetFOV
- GetLookAng
- GetLookAt
- GetModel
- RunAnimation
- SetAmbientLight
- SetAnimated
- SetAnimSpeed
- SetCamPos
- SetColor
- SetDirectionalLight
- SetEntity
- SetFOV
- SetLookAng
- SetLookAt
- SetModel
- StartScene
DModelSelect
- SetHeight
- SetModelList
DModelSelectMulti
- AddModelList
DNotify
- AddItem
- GetAlignment
- GetItems
- GetLife
- GetSpacing
- SetAlignment
- SetLife
- SetSpacing
- Shuffle
DNumberScratch
- OnValueChanged
- DrawNotches
- DrawScreen
- GetActive
- GetDecimals
- GetFloatValue
- GetFraction
- GetMax
- GetMin
- GetRange
- GetShouldDrawScreen
- GetTextValue
- GetZoom
- IdealZoom
- IsEditing
- LockCursor
- PaintScratchWindow
- SetActive
- SetDecimals
- SetFloatValue
- SetFraction
- SetMax
- SetMin
- SetShouldDrawScreen
- SetValue
- SetZoom
- UpdateConVar
DNumberWang
- OnValueChanged
- GetDecimals
- GetFloatValue
- GetFraction
- GetInterval
- GetMax
- GetMin
- GetTextArea
- GetValue
- HideWang
- SetDecimals
- SetFloatValue
- SetFraction
- SetInterval
- SetMax
- SetMin
- SetMinMax
- SetValue
DNumSlider
- OnValueChanged
- GetDecimals
- GetDefaultValue
- GetMax
- GetMin
- GetRange
- GetTextArea
- GetValue
- IsEditing
- ResetToDefaultValue
- SetConVar
- SetDark
- SetDecimals
- SetDefaultValue
- SetMax
- SetMin
- SetMinMax
- SetValue
- TranslateSliderValues
- UpdateNotches
- ValueChanged
DPanel
DPanelList
DPanelOverlay
DPanelSelect
DPanPanel
DProgress
- GetFraction
- SetFraction
DProperties
DProperty_Combo
DProperty_Float
- GetDecimals
DProperty_Generic
- GetRow
- SetRow
- Setup
- ValueChanged
DProperty_VectorColor
- Setup
- SetValue
DPropertySheet
DRGBPicker
- OnChange
- GetPosColor
- GetRGB
- SetRGB
DScrollPanel
- AddItem
- Clear
- GetCanvas
- GetPadding
- GetVBar
- InnerWidth
- PerformLayoutInternal
- Rebuild
- ScrollToChild
- SetCanvas
- SetPadding
DShape
DSizeToContents
- GetSizeX
- GetSizeY
- SetSizeX
- SetSizeY
DSlider
DSprite
- GetColor
- GetHandle
- GetMaterial
- GetRotation
- SetColor
- SetHandle
- SetMaterial
- SetRotation
DTab
DTextEntry
DTileLayout
- OnModified
- ClearTiles
- ConsumeTiles
- Copy
- CopyContents
- FindFreeTile
- FitsInTile
- GetBaseSize
- GetBorder
- GetMinHeight
- GetSpaceX
- GetSpaceY
- GetTile
- Layout
- LayoutTiles
- SetBaseSize
- SetBorder
- SetMinHeight
- SetSpaceX
- SetSpaceY
- SetTile
DTooltip
DTree
DTree_Node
DVerticalDivider
- DoConstraints
- GetBottom
- GetBottomMin
- GetDividerHeight
- GetDragging
- GetHoldPos
- GetMiddle
- GetTop
- GetTopHeight
- GetTopMax
- GetTopMin
- SetBottom
- SetBottomMin
- SetDividerHeight
- SetDragging
- SetHoldPos
- SetMiddle
- SetTop
- SetTopHeight
- SetTopMax
- SetTopMin
- StartGrab
DVScrollBar
- AddScroll
- AnimateTo
- BarScale
- GetHideButtons
- GetOffset
- GetScroll
- Grip
- SetHideButtons
- SetScroll
- SetUp
IconEditor
ImageCheckBox
- GetChecked
- Set
- SetChecked
- SetMaterial
Material
- SetAlpha
- SetMaterial
MatSelect
SpawnIcon
SpawnmenuContentPanel
TextEntry
- OnKeyCodeTyped
- OnTextChanged
AchievementIcon
AvatarImage
Awesomium
Button
CheckButton
ContentSidebarToolbox
CtrlListBox
DCategoryHeader
DListLayout
DListView_ColumnPlain
DListView_DraggerBar
DListViewHeaderLabel
DListViewLabel
DListViewLine
DNumPad
DProperty_Boolean
DProperty_Entity
DProperty_Int
DScrollBarGrip
DTree_Node_Button
EditablePanel
fingerposer
FingerVar
Frame
HTML
Label
ModelImage
PanelList
PresetEditor
PropSelect
RadioButton
RichText
SlideBar
Slider
TGAImage
URLLabel

Enums 99

Structs 63

Shaders 14

Other References 28