jquery offset top & left

jquery offset top & left

hey guys,

i know i'm using the correct code here but for some reason the offset left and right doesn't change when moving the draggable grid/image cropper here:


http://jsfiddle.net/destramic/ybq2mab5/

  1.  $('img').click(function() {
            offset      = $('.cropper').position(),
                selected_x  = offset.left,
                selected_y  = offset.top,
                selected_x2 = $('.cropper').width(),
                selected_y2 = $('.cropper').height(),
               
            console.log('x = ' + selected_x + '  y=' + selected_y + ' x2 = ' + selected_x2 + ' y2= ' + selected_y2);
          });


if you move grid and click on image i get the results of x and y as:

x = 0  y=1 x2

which is incorrect...what is going wrong here please?

thank you