title: Guides not properly display when moving jquery-ui-draggable boxes inside element has position relative and margin auto
body: <p>I've tried sample at here <a href="https://stackoverflow.com/a/10246981/3892316">https://stackoverflow.com/a/10246981/3892316</a> but if I put element inside parent div with position is relative and center div with margin auto -> It will not working properly.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="well grid-guide" style="height: 1123px; width: 794px;" id="droptarget" data-role="droptarget"&gt;
      &lt;div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-1" style="position: absolute; top: 86px; left: 329px;"&gt;
          &lt;div style="padding:5px;border-radius:7px;" class="elementContainer"&gt;
              &lt;label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-1"&gt;Click here to change
              &lt;/label&gt;
              &lt;div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;"&gt;
                  &lt;input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-1"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-2" style="position: absolute; top: 201px; left: 272px;"&gt;
          &lt;div style="padding: 5px; border-radius: 7px; cursor: default;" class="elementContainer"&gt;
              &lt;label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-2"&gt;Click here to change
              &lt;/label&gt;
              &lt;div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;"&gt;
                  &lt;input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-2"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var MIN_DISTANCE = 10; // minimum distance to "snap" to a guide
  var guides = []; // no guides available ... 
  var innerOffsetX, innerOffsetY; // we'll use those during drag ... 
  var offset;
  
  $( ".canvas" ).draggable({
      start: function( event, ui ) {
           $("#droptarget").append($("&lt;div id=\"guide-h\" class=\"guide\"&gt;&lt;/div&gt;"));
           $("#droptarget").append($("&lt;div id=\"guide-v\" class=\"guide\"&gt;&lt;/div&gt;"));
          guides = $.map( $( ".canvas" ).not( this ), computeGuidesForElement );
          innerOffsetX = event.originalEvent.offsetX;
      innerOffsetY = event.originalEvent.offsetY;
          offset = $(this).offset();
      }, 
      drag: function( event, ui ){
          // iterate all guides, remember the closest h and v guides
          var guideV, guideH, distV = MIN_DISTANCE+1, distH = MIN_DISTANCE+1, offsetV, offsetH; 
          var chosenGuides = { top: { dist: MIN_DISTANCE+1 }, left: { dist: MIN_DISTANCE+1 } }; 
          var $t = $(this);
  var pos = { top: event.originalEvent.pageY - innerOffsetY, left: event.originalEvent.pageX - innerOffsetX }; 
          var w = $t.outerWidth() - 1; 
          var h = $t.outerHeight() - 1; 
          var elemGuides = computeGuidesForElement( null, pos, w, h ); 
          $.each( guides, function( i, guide ){
              $.each( elemGuides, function( i, elemGuide ){
                  if( guide.type == elemGuide.type ){
                      var prop = guide.type == "h"? "top":"left"; 
                      var d = Math.abs( elemGuide[prop] - guide[prop] ); 
                      if( d &lt; chosenGuides[prop].dist ){
                          chosenGuides[prop].dist = d; 
                          chosenGuides[prop].offset = elemGuide[prop] - pos[prop]; 
                          chosenGuides[prop].guide = guide; 
                      }
                  }
              } ); 
          } );
  
          if( chosenGuides.top.dist &lt;= MIN_DISTANCE ){
              $( "#guide-h" ).css( "top", chosenGuides.top.guide.top ).show(); 
              ui.position.top = chosenGuides.top.guide.top - chosenGuides.top.offset;
          }
          else{
              $( "#guide-h" ).hide(); 
              ui.position.top = pos.top; 
          }
  
          if( chosenGuides.left.dist &lt;= MIN_DISTANCE ){
              $( "#guide-v" ).css( "left", chosenGuides.left.guide.left ).show(); 
              ui.position.left = chosenGuides.left.guide.left - chosenGuides.left.offset; 
          }
          else{
              $( "#guide-v" ).hide(); 
              ui.position.left = pos.left; 
          }
      }, 
      stop: function( event, ui ){
          $( "#guide-v, #guide-h" ).remove(); 
      }
  });
  
  
  function computeGuidesForElement( elem, pos, w, h ){
      if( elem != null ){
          var $t = $(elem); 
          pos = $t.offset(); 
          w = $t.outerWidth() - 1; 
          h = $t.outerHeight() - 1; 
      }
  
      return [
          { type: "h", left: pos.left, top: pos.top }, 
          { type: "h", left: pos.left, top: pos.top + h }, 
          { type: "v", left: pos.left, top: pos.top }, 
          { type: "v", left: pos.left + w, top: pos.top },
          // you can add _any_ other guides here as well (e.g. a guide 10 pixels to the left of an element)
          { type: "h", left: pos.left, top: pos.top + h/2 },
          { type: "v", left: pos.left + w/2, top: pos.top } 
      ]; 
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      font-family: courier new, courier; 
      font-size: 12px; 
  }
  
  #droptarget {
  
      background: #ccc;
      margin: 0 auto;
      position: relative;
  }
  
  .canvas{
      border: 1px solid #ccc; 
  
      cursor: move;
      position: absolute;         
  }
  
  .guide{
      display: none; 
      position: absolute; 
      left: 0; 
      top: 0; 
  }
  
  #guide-h{
      border-top: 1px dashed #55f; 
      width: 100%; 
  }
  
  #guide-v{
      border-left: 1px dashed #55f; 
      height: 100%; 
  }
  </code></pre>
  
  <p>Demo (Only work properly in small window): </p>
  
  <p><a href="http://jsfiddle.net/pmL4p3fL/" rel="nofollow noreferrer">http://jsfiddle.net/pmL4p3fL/</a></p>