I have few components on my page which are draggable. They have the class draggable. When this is dragged and stops I need to get the left and top positions

        function init() {
            var p = $('#groups-parent');
            $('.draggable').draggable({
                obstacle: ".obstacle",
                preventCollision: true,
                containment: [
                    p.offset().left, p.offset().top, p.offset().left + p.width() - 225, p.offset().top + p.height() - 50
                ], 
                start: function(event, ui) {
                    $(this).removeClass('obstacle');
                },
                stop: function (event, ui) {
                    console.log(ui);
                    $('#groups-parent').css({ 'min-height': Math.max(500, ui.position.top + 50) });
                    $(this).addClass('obstacle');
                    
                    getTopLeftPosition();
                }
            });  
        }

Here is my function that should get the left and top positions.

        function getTopLeftPosition(e) {
            var coordX = e.pageX - $(this).offset().left,
                coordY = e.pageY - $(this).offset().top;

            alert(coordX + ' , ' + coordY);
        }

This does not work. All I get in my browser is this error message

Cannot read properties of undefined (reading 'left')

How can I get this left and top positions? The alert should indicate it.