javascript - jQuery UI draggable - constrain inner element within parent when inner element is larger than parent -

I'm trying to achieve this effect with jQuery UI - the way you crop an image on Facebook Do the following:

P> Code> & lt; Div & gt; & Lt; Img src = "fat_cat.jpg" & gt; & Lt; / Div & gt;

And this is the argument that seems appropriate for the purpose - though it is incomplete:

  $ ("img"). Draggable ({Drag: Drag Handler}); Function Drag Handler (Event, UI) {var x = event.target.x - event.target.parentNode.offsetLeft; Var y = event.target.offsetTop; If (x> 0) {// How to stop movement? } If (x & lt; - (event.target.offsetWidth - event.target.parentNode.offsetWidth))}} (y> 0) {} if (y <- (event.target.offsetHyight - event.target) .parentNode.offsetHeight)) {} $ ("p"). Text (x + "," + y); }   
 My first attempt is to  offsetLeft  & amp; The  offsetTop  variable, in all its multiple points, but nothing is working for me  
 Here is a JSFDial with the actions described above:   
 
 
 It can do with an internal container whose width / height is calculated only to travel the image to a certain distance. Of course you have to place the inner container appropriately.  
 Here it is mine:  
  Markup:   
  & lt; Div id = "outer" & gt; & Lt ;! - Status: Relative - & gt; & Lt; Div id = "inner" & gt; & Lt ;! - Status: Full - & gt; & Lt; Img src = "" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  Script:   
  var img = $ ("img"). Draggable ({prevention: '#inner'}), h = img.height (), w = img.width (), external = $ ('# outer'), oh = external.height (), oo = External.width (), IH = H + (H - oh), IW = W + (WOO), IT = '-' + ((IH - OH) / 2) + 'PX', IL = '- '+ ((IW-OW) / 2) +' pixels'; $ ('#internal'). CSS ({width: IW, height: Ih, top: IT, left: IL});