title: jquery Drag and Drop - droppable area has border and draggable item won't snap to the inside of this border
body: <p>I'm using jQuery drag and droppable to create a list of tiles plus a draggable widget which can be dropped in any of the tiles.</p>
  
  <p>Each tile has a border but the widget doesn't, so although they are both the same size, when I drop the widget into the tile it snaps to the bottom left of the tile's border. Thus there is two pixels spare on the top of the tile.</p>
  
  <p>Here's a fiddle
  <a href="http://jsfiddle.net/gztQM/" rel="nofollow">http://jsfiddle.net/gztQM/</a></p>
  
  <p>and some code:</p>
  
  <pre><code>div[id^="row"] {float:left; width:65px; height:65px; margin:5px;border:1px solid #454545; background-color:#262e41;}
  .bookmark {float:left; width:65px; height:65px; background-color:#edff57;cursor: move;display:block; margin:-1px 0px 0px -1px;}
  .bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
  </code></pre>
  
  <p>Here's an example of the droppable areas (tiles)</p>
  
  <pre><code>&lt;div class="position" id="row-2col-1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the draggable link</p>
  
  <pre><code>&lt;a href class="bookmark"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>the JS</p>
  
  <pre><code>$('.bookmark').draggable({containment: '#content', snap:'.position', snapMode:'inner', revert:'invalid',snapTolerance: 32});
  
  $('.position').droppable({drop: handleDropEvent, accept:'.bookmark'});
  function handleDropEvent( event, ui ) {
    var draggable = ui.draggable;
  }
  </code></pre>
  
  <p>How can I get it to snap to inside the border? I've tried adding margins and paddings but to no avail. Can't see anything mentioning this on the jquery site either</p>
  
  <p>Help! :)</p>