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