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>添加透明的border-top）几乎就在那里，但在当前 FireFox（36.0.1）中不起作用在测试/写作时... ...同样的问题发生。

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

Answer 1

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

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

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

Answer 2

我有类似的问题，我在css中使用了一个简单的解决方法。

此处更新了fiddle

margin-right:-1px;

Answer 3

我遇到了同样类型的许多问题，并且还有一些极端的闪烁，但我能够通过放弃col-md-*元素并改为列表来完美地完成这项工作，作为jQuery UI可排序示例在他们的网站上。 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 4

试试这个：

#sortable > div {
    border-top: 1px solid rgba(255,255,255,0);
}

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

4 个答案: