Is it possible to use Bootstrap's fluid grid layout system in conjunction with jQuery UI's sortable functionality?

Question

I have a fluid Bootstrap layout with three span4's inside of a row-fluid div. This looks and works the way I would expect it to. Calling .sortable(); on the row element works, but during drag, the layout becomes strangely unpredictable. Here's a link: http://jsfiddle.net/dhilowitz/CwcKg/15/. If you grab Item #3 and move it left, it behaves exactly the way I would expect it to. If you grab Item #1 and move it right, however, all hell breaks looks and Item #3 moves to the next row.

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

Although I accepted the answer above, I wanted to provide the solution that I had come up with in the interim as I think it might be helpful in debugging other jQuery + Twitter Bootstrap collisions. Instead of applying the margin-left to all .ui-sortable-placeholder, I applied them during the start event and removed them during the sortable's stop event. I also used appendTo to specify that the helper should be appended to the document body and not within the 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');
    }
});

Link: http://jsfiddle.net/dhilowitz/s7Kch/

Answer 2

The problem seems to be in .container-fluid class, the bootstrap css has left and right padding that causes the issue.

This is the rule of bootstrap.min.css:

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

You can try with this new rules, in accord with this post: Jquery UI sortable with bootstrap bugs:

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

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

If you need some extra padding, you can put your code in external div.

Good code