title: Strange behaviour when dragging sortable Bootstrap panels with jQuery UI
body: <p>I'm getting my teeth into jQuery UI and Bootstrap, and I'm trying to implement draggable/sortable Panels, which is almost working.</p>
  
  <p>I'm using the <code>container</code> model (instead of <code>container-fluid</code>) and I have multiple panels.  The panels are setup to spread over differing columns depending on the screen size.</p>
  
  <p>Dragging a panel that is <strong>not</strong> in the right-most column moves the panel with the mouse, and the placeholder moves under the mouse <strong>unless</strong> you move it over the right-most column.</p>
  
  <p>If you drag a panel from the right-most column, the panel appears in the location of the <strong>next</strong> panel.</p>
  
  <p><strong>Can anybody explain why this is happening, and how I make it work as it should - i.e. I should be able to drag any panel and place it in any location?</strong></p>
  
  <p>To see the issue in action, please see <a href="http://jsfiddle.net/L6vnjhsp/">this jsfiddle</a> (click <a href="https://jsfiddle.net/L6vnjhsp/embedded/result/">here to see it full size</a>) and try dragging a panel that <strong>isn't</strong> in the right column over to the right column.  And try dragging a panel that <strong>is</strong> in the right column anywhere.</p>
  
  <p>The HTML is setup as follows (showing just the first two panels)...</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="sortable" class="row"&gt;
      &lt;div class="col-lg-2 col-md-3 col-sm-4 col-xs-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;Test 1&lt;/div&gt;
              &lt;div class="panel-body"&gt;Content&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-2 col-md-3 col-sm-4 col-xs-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;Test 2&lt;/div&gt;
              &lt;div class="panel-body"&gt;Content&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery is setup as...</p>
  
  <pre><code>$(function () {
      $("#sortable").sortable().disableSelection();
  });
  </code></pre>
  
  <p>I'm using jQuery 1.11.2, jQuery UI 1.10.3, Bootstrap 3.3.2</p>
  
  <hr>
  
  <p>The answer provided by @AlexStack (to add a transparent border-top to each <code>&lt;div&gt;</code>) is almost there, but doesn't work in <em>current</em> FireFox (36.0.1 at time of testing/writing)... the same issue occurs.</p>
  
  <p>Does anybody know a solution that covers all major browsers?</p>