In general, I find absolutely positioning everything at some common origin, like 0,0, and using gsTransform to navigate and move stuff around to be the best approach. That works really well when using multiple draggables instances, like in a grid.
However, that's not always possible, so you will need to use other approaches. I already mentioned how getBoundingClientRect is really reliable, but so are element properties like clientLeft, clientTop, clientWidth, clientHeight, offsetLeft, offsetTop, offsetWidth, offsetHeight. The difference between the client and offset properties aren't that great, so I'll skip that comparison.
I made a demo that does some really basic animations, and displays how gsTransform, getBoundingClientRect, and the offset properties are interpreting those changes. Check out how the properties for getBoundingClientRect start to differ from gsTransform when its rotating. That's why I said rotation was a huge gotcha in another post.
I would say that everything being displayed there is technically correct, even though their values don't match up. If you're wondering what's up with the offset properties, it's because they don't take into account any transforms. That doesn't make them any less important or inaccurate. In fact, sometimes that's exactly what you want.
In that grid demo above, I use offsetLeft and offsetTop for positioning because I know the coordinates won't be affected by any transforms, making it much easier to calculate stuff.
And if you like that grid demo, here's another version using SplitText!