Bootstrap'in sıvı ızgara yerleşim sistemini jQuery UI'nin sıralanabilir işlevselliği ile birlikte kullanmak mümkün mü?

Question

Üç span4'ünün bir satır sıvı div'inin içinde sıvı Bootstrap düzeni var. Bu, beklediğim gibi görünüyor ve çalışıyor. Satır öğesinde .sortable(); çağrılıyor, ancak sürükleme sırasında, düzen garip bir şekilde tahmin edilemez hale gelir. İşte bir bağlantı: http://jsfiddle.net/dhilowitz/CwcKg/15/. Öğe # 3'ü yakalar ve sola taşırsanız, tam olarak beklediğim şekilde davranır. Öğe # 1'i yakalar ve doğru hareket ettirirseniz, tüm cehennem kırıkları görünür ve Madde # 3 bir sonraki satıra taşınır.

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

Sorun, .container-fluid sınıfında gibi görünüyor, bootstrap css, soruna neden olan sol ve sağ dolguya sahip.

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

Bu yazı ile uyum içinde, bu yeni kurallara deneyebilirsiniz: Jquery UI sortable with bootstrap bugs:

Bu

bootstrap.min.css üstünlüğü olan

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

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

bazı ekstra gerekiyorsa doldurma, kodunuzu harici div'a koyabilirsiniz. Yukarıdaki cevabı kabul etmesine rağmen

İyi kod

Answer 2

, ben diğer jQuery + Heyecan Bootstrap çarpışmalara ayıklama yardımcı olabileceğini düşünüyorum ben arada birlikte gelmişti çözüm sağlamak istedik. Margin-sol'u tüm .ui-sıralanabilir-yer tutucuya uygulamak yerine, başlangıcında olayını uygulayarak uyguladık ve bunları sortable'ın duruşunda duruşunda kaldırdım. Ayrıca, yardımcının row-fluid içinde değil, belge gövdesine eklenmesini belirtmek için appendTo'u kullandım.

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'); 
    } 
}); 

Bağlantı: http://jsfiddle.net/dhilowitz/s7Kch/