title: jQuery UI Draggable not dragging from the correct place
body: <p>When I grab my draggable(s), they seem to snap incorrectly to the grid on the right - this has me confused!</p>
  
  <p>Any idea how I can drag an element and have it snap closer to my cursor??</p>
  
  <p>code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script type="text/javascript" language="javascript" src="sys/jquery-1.4.2.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="sys/jquery-ui-1.8.4.min.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
              * { font-family: arial; font-size: 11px; margin: 0; padding: 0; }
              div#create-container { width: 900px; height: 500px; min-height: 500px; background-color: #666; margin: 0 auto; }
              div#create-sections { width: 100px; height: 500px; min-height: 500px; background-color: #555; float: left; }
              ul#node-grid { width: 200px; height: 200px; min-height: 200px; background-color: #777; float: right; }
              li.grid-node { width: 20px; height: 20px; min-height: 20px; background-color: darkred; display: block; float: left; list-style-type: none; }
              div.onepx { width: 20px; height: 20px; min-height: 20px; background-color: #000; position: absolute; float: left; margin-left: 40px; margin-top: 40px; }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
              //add sections to page
                  function addSections() {
                      var numParts = 10;
  
                      var addItems = numParts;
                      var addMoreItems = numParts*10;
                      while (addItems &gt;= 0) {
                          $('div#create-sections').append('&lt;div class="onepx"&gt;&lt;/div&gt;');
                          addItems--;
                      }
                      while (addMoreItems &gt; 0) {
                          $('ul#node-grid').append('&lt;li class="grid-node"&gt;&lt;/li&gt;');
                          addMoreItems--;
                      }
                  }
  
                  // init
                  addSections();
                  $(".onepx").draggable({ snap: '.grid-node', snapMode: 'inner', snapTolerance: 20, containment: '#create-container', opacity: 0.5 });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="create-container"&gt;
              &lt;div id="create-sections"&gt;&lt;/div&gt;
              &lt;ul id="node-grid"&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>