Question

I’ve been trying to get the final offset coord for a draggable box but it doesn’t show both the final x and the final xmax and same for the y axis.i’ve debugged it and it shows that the problem arises from putting in the variable finalxmPos and appending the text in the list with id finalXm because if i remove those two lines it works but i don’t get the final xmin and xmax just the xmin. The code is right here http://jsfiddle.net/DGbT3/133/.
any help will be appreciated..

Answer 1

Working Example: http://jsfiddle.net/DGbT3/137/

You just had some casing errors. The o in offset should have been uppercase. Also the call to Width() should have been width()

Checkout the comments

  $('#dragThis').draggable(
        {
            containment: $('body'),
            drag: function(){
                var offset = $(this).offset();
                var xPos = offset.left;
                var xmPos = offset.left + $('#dragThis').outerWidth();
                var yPos = offset.top;
                var ymPos = offset.top + $('#dragThis').outerHeight();
                $('#posX').text('x: ' + xPos);
                 $('#posmX').text('xm: ' + xmPos);
                $('#posY').text('y: ' + yPos);
                $('#posmY').text('ym: ' + ymPos);
            },
            stop: function(){
                var finalOffset = $(this).offset();
                var finalxPos = finalOffset.left;
                var finalxmPos = finalOffset.left + $('#dragThis').width(); //needed to uppercase o in finalOffset
//also changed Width to width()
                var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalXm').text('Final Xmax: ' + finalxmPos);
        $('#finalY').text('Final Y: ' + finalyPos);
            }
        });

    $('#dropHere').droppable(
        {
            accept: '#dragThis',
            over : function(){
                $(this).animate({'border-width' : '5px',
                                 'border-color' : '#0f0'
                                }, 500);
                $('#dragThis').draggable('option','containment',$(this));
            }
        });