使用jQuery UI拖动可排序的Bootstrap面板时的奇怪行为

我把牙齿弄入了jQuery UI和Bootstrap,我正在尝试实现可拖动/可排序的面板,几乎可以工作.

我使用容器模型(而不是容器流体),我有多个面板.根据屏幕尺寸,面板设置为分散在不同的列上.

拖动不在最右侧列中的面板会使用鼠标移动面板,占位符将移动到鼠标下方,除非将其移动到最右侧的列.

如果从最右侧的列拖动面板,面板将显示在下一个面板的位置.

任何人都可以解释为什么会发生这种情况,以及我如何使其发挥作用 – 即我应该能够拖动任何面板并将其放置在任何位置？

要查看操作中的问题,请参阅this jsfiddle(单击here to see it full size),然后尝试将不在右侧列中的面板拖动到右侧列.并尝试将任何位于右列的面板拖动.

HTML的设置如下(仅显示前两个面板)…

<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>

jQuery设置为…

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

我使用的是jQuery 1.11.2,jQuery UI 1.10.3,Bootstrap 3.3.2

@AlexStack提供的答案(为每个÷ div>添加一个透明的边框)几乎在那里,但不能在当前的FireFox(36.0.1在测试/写作时)…同样的问题发生.

有没有人知道涵盖所有主流浏览器的解决方案？

解决方法

这似乎是一个jQuery UI(或Bootstrap,我不知道哪一个)的错误.但添加隐形边框可解决问题：

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

你可以看到这个小提琴的解决方案：http://jsfiddle.net/L6vnjhsp/2/