Question

我有一个流畅的Bootstrap布局，在行 - 流体div中有三个span4。它的外观和工作方式与我期望的方式相同。在行元素上调用.sortable();可以正常工作，但在拖动过程中，布局变得异常不可预测。这是一个链接：http://jsfiddle.net/dhilowitz/CwcKg/15/。如果您抓住项目＃3并向左移动它，它的行为与我期望的完全相同。然而，如果你抓住第1项并向右移动，那么所有地狱都会破坏，第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 事件期间应用它们，并在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/dhilowitz/s7Kch/

Answer 2

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

这是bootstrap.min.css的规则：

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

您可以根据这篇文章尝试使用这条新规则：Jquery UI sortable with bootstrap bugs：

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

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

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

好的代码

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

2 个答案: