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

Question

我正在研究jQuery UI和Bootstrap,我正在尝试实现可拖动/可排序的面板,这几乎可以正常工作.

我正在使用container模型(而不是container-fluid),我有多个面板.根据屏幕尺寸,面板设置为分布在不同的列上.

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

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

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

要查看该问题,请查看此jsfiddle(单击此处查看完整大小)并尝试将不在右列中的面板拖到右列.并尝试拖动面板是在右列的任何地方.

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提供的答案(为每个添加一个透明的border-top <div>)几乎就在那里,但在当前的 FireFox(测试/写入时的36.0.1)中不起作用......出现同样的问题.

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

Answer 1

这似乎是 jQuery UI（或 Bootstrap，我不确定是哪一个）的一个错误。但是添加一个不可见的边框可以解决这个问题：

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

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