title: jQueryUI Sortable Item Incorrect Position While Dragging
body: <p>I have a jQueryUI sortable list which contains three <code>bootstrap</code> panels, panels 1 and 2 start dragging with the correct initial positions, however whenever you try to drag panel 3 it drops under panel 1 offset from the cursor. <a href="http://jsfiddle.net/m36T7/1/"><strong>Live demo</strong></a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ul id="sortable"&gt;
      &lt;li class="col-xs-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading ui-sortable-handle"&gt;1&lt;/div&gt;
              &lt;div class="panel-body"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading ui-sortable-handle"&gt;2&lt;/div&gt;
              &lt;div class="panel-body"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading ui-sortable-handle"&gt;3&lt;/div&gt;
              &lt;div class="panel-body"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>$('#sortable').sortable({
      tolerance: 'pointer',
      handle: '.panel-heading',
      placeholder: 'col-xs-4 panel-al-placeholder',
      start: function (e, ui) {
          ui.placeholder.height(ui.item.children().height());
      }
  });
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>ul {
      width: 650px;
      list-style: none;
      padding: 0;
      margin: 0;
  }
  .panel-al-placeholder {
      margin-bottom: 18px;
      border:2px solid #f8e287;
      background:#fef9e7
  }
  </code></pre>