Strange behaviour when dragging sortable Bootstrap panels with jQuery UI

Question

I'm getting my teeth into jQuery UI and Bootstrap, and I'm trying to implement draggable/sortable Panels, which is almost working.

I'm using the container model (instead of container-fluid) and I have multiple panels. The panels are setup to spread over differing columns depending on the screen size.

Dragging a panel that is not in the right-most column moves the panel with the mouse, and the placeholder moves under the mouse unless you move it over the right-most column.

If you drag a panel from the right-most column, the panel appears in the location of the next panel.

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?

To see the issue in action, please see this jsfiddle (click here to see it full size) and try dragging a panel that isn't in the right column over to the right column. And try dragging a panel that is in the right column anywhere.

The HTML is setup as follows (showing just the first two panels)...

<div class="container">
  <div id="sortable" class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading">Test 1</div>
            <div class="panel-body">Content</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading">Test 2</div>
            <div class="panel-body">Content</div>
        </div>
    </div>
    ...
  </div>
</div>

The jQuery is setup as...

$(function () {
    $("#sortable").sortable().disableSelection();
});

I'm using jQuery 1.11.2, jQuery UI 1.10.3, Bootstrap 3.3.2

---

The answer provided by @AlexStack (to add a transparent border-top to each <div>) is almost there, but doesn't work in current FireFox (36.0.1 at time of testing/writing)... the same issue occurs.

Does anybody know a solution that covers all major browsers?

Answer 1

I had many problems of this same type, and also with some extreme flickering, but I was able to make this work perfectly by ditching the col-md-* elements and going for a list instead, as the jQuery UI sortable example is on their site. http://jqueryui.com/sortable/#display-grid

<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
    #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>    
<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
</ul>
<script>
    $( "#sortable" ).sortable();
</script>

Answer 2

This seems to be a bug of jQuery UI (or Bootstrap, I'm not sure which one). But adding an invisible border fixes the problem:

#sortable > div {
    border-top: 1px solid transparent;
}

You can see the solution in this fiddle: http://jsfiddle.net/L6vnjhsp/2/