jquery - 是否可以将 Bootstrap 流体网格布局系统与 jQuery UI 可排序功能结合使用？

Question

我有一个流体 Bootstrap 布局，行流体 div 内部有三个 span4。这看起来和工作方式都符合我的预期。在行元素上调用 .sortable(); 是可行的，但在拖动过程中，布局变得奇怪地不可预测。这是一个链接:http://jsfiddle.net/dhilowitz/CwcKg/15/ 。如果你捕获第 3 项并将其向左移动，它的行为完全符合我的预期。但是，如果您捕获 Item #1 并将其向右移动，则外观会完全崩溃，并且 Item #3 会移动到下一行。

JSFiddle: http://jsfiddle.net/dhilowitz/CwcKg/15/

HTML:

<div class="container-fluid">
    <div class="row-fluid sortme">
        <div class="span4 element"><h2>Item #1</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
        <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
        <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
    </div>
    <!--/row-->
</div>
<!--/.fluid-container-->

Javascript:

$(".row-fluid").sortable();

CSS:

.element > h2 {
    cursor:pointer;
    background-color:#cccccc;
    border-radius:5px;
    padding: 0px 5px;
}

Answer 1

虽然我接受了上面的答案，但我想提供我临时提出的解决方案，因为我认为它可能有助于调试其他 jQuery + Twitter Bootstrap 冲突。我没有将 margin-left 应用于所有 .ui-sortable-placeholder，而是在 start 事件期间应用它们，并在可排序的 stop 事件期间删​​除它们。我还使用 appendTo 指定辅助程序应附加到文档正文，而不是在 row-fluid 内。

CSS

.real-first-child {
    margin-left:0 !important;
}

Javascript

$(".row-fluid").sortable({
    placeholder: 'span4',
    helper: 'clone',
    appendTo: 'body',
    forcePlaceholderSize: true,
    start: function(event, ui) {
        $('.row-fluid > div.span4:visible:first').addClass('real-first-child');
    }, 
    stop: function(event, ui) {
        $('.row-fluid > div.real-first-child').removeClass('real-first-child');
    },
    change: function(event, ui) {
        $('.row-fluid > div.real-first-child').removeClass('real-first-child');
        $('.row-fluid > div.span4:visible:first').addClass('real-first-child');
    }
});

链接:http://jsfiddle.net/dhilowitz/s7Kch/