Czy możliwe jest korzystanie z układu układu płynnej siatki Bootstrap w połączeniu z sortowalną funkcjonalnością jQuery UI?

Question

Mam płynny układ Bootstrap z trzema span4 wewnątrz div płynu płynu. To wygląda i działa tak, jak bym tego oczekiwał. Wywołanie .sortable(); na elemencie wiersza działa, ale podczas przeciągania układ staje się dziwnie nieprzewidywalny. Oto link: http://jsfiddle.net/dhilowitz/CwcKg/15/. Jeśli złapiesz przedmiot nr 3 i przesuniesz go w lewo, zachowuje się dokładnie tak, jak bym tego oczekiwał. Jeśli złapiesz przedmiot nr 1 i przesuniesz go w prawo, wszystkie piekła przerywają wygląd, a punkt 3 przenosi się do następnego rzędu.

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

Problem wydaje się być w .container płynu klasy css bootstrap jest lewy i prawy obicie, który powoduje ten problem.

Jest to zasada bootstrap.min.css:

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

Można spróbować z tym nowe przepisy, w zgodzie z tym poście: Jquery UI sortable with bootstrap bugs:

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

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

Jeśli potrzebujesz dodatkowych padding, możesz umieścić swój kod w zewnętrznym div.

Dobry kod

Answer 2

Chociaż przyjąłem odpowiedź powyżej, chciałem dostarczyć rozwiązanie, że wymyślił w międzyczasie, jak myślę, że może to być pomocne w debugowania innych kolizji jQuery + Twitter Bootstrap. Zamiast stosować margines-lewy do wszystkich placeui-sortable-placeholder, zastosowałem je podczas zdarzenia start i usunąłem je podczas zdarzenia. Użyłem także appendTo, aby określić, że pomocnik powinien być dołączony do treści dokumentu, a nie do numeru 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/