jQuery UI .position() mouse event tracking with boundaries

Question

I'm working on an image gallery within which I want to display all thumbnails in the same dimensions and have any overflow hidden, but onmouseover, the user is able to see the hidden portion of the thumbnail by moving their mouse within the thumbnails parent element, while the image tracks its movement.

jQuery UI:

$( '#targetElement' ).mousemove(function( event ) {
  $( "#position img" ).position({
    my: "center",
    of: event,
    collision: "none"
  });
});

CSS:

#targetElement {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 50px auto;
}
.positionDiv {
  width: 200px;
  height: 150px;
  position: relative;
}
.positionDiv img {
  min-height: 150px;
  max-width: 200px;
  position: absolute;
  top: -50%;
}

HTML:

<div id="targetElement">
  <div class="positionDiv" id="position"><img src="http://er.pe/server/php/files/thumbnail/ill_09.jpg"></div>
</div>

Please see JSFiddle for my current progress.

What I'd like to do is set vertical boundaries so that the edges of the image cannot cross the vertical borders of its parent element.

Is this possible?

Answer 1

I don't quite understand what you mean by setting boundaries within the borders of the images parent element because you are already using overflow hidden and most of the image is already cross the boundaries when dragged.. Maybe you can clarify what you want for me.

But here is a basic example of how you can have an image stay within boundaries using 'jquery-ui-draggable`. Maybe you can modify this to accomplish your designs.

Here is an example:

   var right = 0;
    var bottom = 0;
    var top = 0;
    var left = 0;
    adjustment = 5;
    $( "img" ).draggable({
        start: function ( event, ui ) {
            bottom = $(this).parent().parent().height();
            right = $(this).parent().parent().width();
        },
        drag: function( event, ui ) {
            if(ui.position.top <= top-adjustment)
                ui.position.top = top-adjustment;
            if(ui.position.left <= left-adjustment)
                ui.position.left = left-adjustment;
            console.log(ui.position.left);
            if(ui.position.left+$(this).width() >= right+adjustment)
                ui.position.left = right-$(this).width()+adjustment;
            if(ui.position.top+$(this).height() >= bottom+adjustment)
                ui.position.top = bottom-$(this).height()+adjustment;
        }
    });

http://jsfiddle.net/trevordowdle/B5f5M/

Update

http://jsfiddle.net/trevordowdle/DdMgP/4/