Bootstrapの流体グリッドレイアウトシステムとjQuery UIのソート可能な機能を併用することは可能ですか？

Question

私は3つのspan4がrow-fluid divの内側にある流体ブートストラップレイアウトを持っています。これは私がそれを期待する方法を見て、動作します。行要素の.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

問題は.container-fluidクラスにあるようですが、ブートストラップの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にあなたのコードを置くことができます。

良いコード

Answer 2

私は上記の答えを受け入れたが、私はそれが他のjQuery + Twitterのブートストラップの衝突をデバッグするのに役立つかもしれないと思うように私はその間に思い付くしたソリューションを提供したかったです。すべての.uiソート可能なプレースホルダに余白を適用する代わりに、startイベントの間にそれらを適用し、並べ替え可能な停止イベント中に削除しました。また、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/