Jquery , get position().right of an element?

Question

So I am working on having a draggable image.

very simply, When you drag the image to the left or right side at a specific position, I want the image to snap back to the left or right side.

In the fiddle below, I have the functionality for the left side..but Im not quite sure what the best approach is for determining the right side since Jquery only allows top and left properties.

consider this code:

$(function() {
$(".headerimage").css('cursor', 's-resize');
var y1 = $('.picturecontainer').height();
var y2 = $('.headerimage').height();
$(".headerimage").draggable({
    scroll: false,
    drag: function(event, ui) {
        if (ui.position.left >= 200) {
            ui.position.left = 0;
        }
    },
    stop: function(event, ui) {
        //####
    }
});

FIDDLE

Answer 1

what about this

drag: function(event, ui) {
       if (ui.position.left >= 200 || ui.position.left <= -300) {
               ui.position.left = 0;
       }
},

http://jsfiddle.net/nk7wc/10/

$(function() {
     $(".headerimage").css('cursor', 's-resize');
     var y1 = $('.picturecontainer').height();
     var y2 = $('.headerimage').height();
     $(".headerimage").draggable({
          scroll: false,
          drag: function(event, ui) {
                if (ui.position.left >= 200 || ui.position.left <= -300) {
                      ui.position.left = 0;
                }
          },
          stop: function(event, ui) {
              //####
          }
     });
});

checking against negative value of position.left