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

Question

我正在学习 jQuery UI 和 Bootstrap，并且正在尝试实现可拖动/可排序的面板，这几乎可以工作了。

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

拖动不在最右列的面板会用鼠标移动该面板，并且占位符会在鼠标下方移动除非将其移到右侧-大多数列。

如果从最右列拖动面板，该面板将出现在下一个面板的位置。

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

要查看实际问题，请参阅 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)中不起作用/writing)...同样的问题发生。

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

Answer 1

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

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

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