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

Question

我有一个流畅的Bootstrap布局,在行 - 流体div中有三个span4.它的外观和工作方式与我期望的方式相同.调用.sortable();row元素有效,但在拖动过程中,布局变得异常不可预测.这是一个链接:http://jsfiddle.net/dhilowi​​tz/CwcKg/15/.如果您抓住项目#3并向左移动它,它的行为与我期望的完全相同.然而,如果你抓住第1项并将其向右移动,那么所有地狱都会破坏外观并且第3项移动到下一行.

JSFiddle: http ://jsfiddle.net/dhilowi​​tz/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事件期间应用它们,并在sortable的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/dhilowi​​tz/s7Kch/

Answer 2

问题似乎是在.container-fluid类中,bootstrap css有左右填充导致问题.

这是bootstrap.min.css的规则:

.container-fluid {
    padding-right: 20px;
    padding-left: 20px;
}

您可以尝试使用这个新规则,符合这篇文章:Jquery UI可以使用bootstrap错误进行排序:

.ui-sortable-placeholder {
    margin-left: 0 !important;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

如果需要一些额外的填充,可以将代码放在外部div中.

好的代码