Gathering position of the interface

In the latest update, we've added some crucial event to match your other resources position.

OnPositionUpdate

That event is being called every single tick the element is being dragged and changes it's position:

RegisterNetEvent('ZSX_UI:Storage:OnPositionUpdate')
AddEventHandler('ZSX_UI:Storage:OnPositionUpdate', function(component, position, width, height)
    --@param component STRING {
    --    hud
    --    progressBar
    --    carhud
    --    notifies
    --}

    --@param position OBJECT {
    --    x: x
    --    y: y
    --}

    --@param width NUMBER (PX)
    --@param height NUMBER (PX)
    
end)

So in this example we will be handling carhud element so we can add some elements inside of it.

Mentioned code below is just an example. It's not some kind of working snippet.

RegisterNetEvent('ZSX_UI:Storage:OnPositionUpdate')
AddEventHandler('ZSX_UI:Storage:OnPositionUpdate', function(component, position, width, height)
    if component ~= "carhud" then return end -- skipping other components since we won't be using them
    SendNUIMessage({
        type = "UPDATE_MILLEAGE_POSITION",
        position = position,
        carhudDimension = {width = width, height = height}    
    })
end)

Within the JS you can simply add the handle to apply your element position and surely while having width and height of the component you can manage to do everything possible.