title: Jquery UI draggable / droppable snap to grid not positioned correctly
body: <p>I've been trying out JqueryUI for a simple task where I need to implement a basic drag and drop feature.  I noticed that when I use the snap to grid option, the elements aren't aligned properly when they are being dropped to the target container. It calculates the position of the draggable element from within its container although I defined the containment to be the target area. </p>
  
  <p>see a sample code here: <a href="https://jsfiddle.net/9yzL87md/7/" rel="nofollow noreferrer">https://jsfiddle.net/9yzL87md/7/</a></p>
  
  <pre><code> $( function() {
          $( ".spare-item" ).draggable({
              grid: [ 26, 26 ],
              containment: "#preview",
              cursor: "grab",
              revert: "invalid",
              start: function( event, ui ) {
                  console.log(ui);
                  console.log(ui);
              }                
          });
          $( "#preview" ).droppable({
                  accept: ".spare-item",
                  over: function(event, ui) {
                      $(".spare-item").draggable({
                          grid: [26, 26]
                      });
                  },
                  out: function(event, ui) {
                      $(".spare-item").draggable("option", "grid", false);
                  },
          drop: function( event, ui ) {
              var pos = ui.draggable.offset(), dPos = $(this).offset();
              //console.log(pos.top - dPos.top, pos.left - dPos.left);
          }
          });            
      } ); 
  </code></pre>
  
  <p>above is a sample of my layout for easier understanding. If you try to drag the red element, it will immediately take that into the grey box, but will be snapped a little bit lower than the lower border. I tried many of the similar questions and solutions, but had no luck. What am I missing here? (the width of the container is 234px, and the width of red elements are 26px. I expect the red elements to be snapped in a 26 x 26 grid)</p>