ui.size not working in draggable() jquery-ui

Question

For some reason I am getting a 'ui.size' undefined error. Here is my code:

$('.canvas').draggable({
        containment: $('.canvas'),
        refreshPositions: true,
        drag: function(e, ui) {
            area.css('border', 'none');
        },
        stop: function(event, ui){
            var pinpointHeight, pinpointWidth, pinpointTop, pinpointLeft;
            var offset = $('.canvas').offset();

            for (var i = 0; i < image.pinpoints.length; i++) {
                if(image.pinpoints[i].position == position){
                    pinpointHeight = image.pinpoints[i].height;
                    pinpointWidth = image.pinpoints[i].width;
                }
            }
            var offset2 = area.children('#inner').offset();
            myPinpoint = { 
                "top": offset2.top  - offset.top-2,
                "left": offset2.left  - offset.left-2,
                "width": ui.size.width,
                "height": ui.size.height,
                "position": position };
            $.fn.mapImage.updatePinpoint(image, myPinpoint, position, (offset2.left  - offset.left-2), (offset2.top  - offset.top-2 + pinpointHeight));
            //$.fn.pinpointImage.add(image, myPinpoint);

        }            
    });

Answer 1

From the documentation for UI/Draggable, the ui object only has the following 3 properties:

• ui.helper
• ui.position
• ui.offset

There is no ui.size. What you may be able to do is use instead

ui.helper.width()
ui.helper.height()