8

行流動 div 内に 3 つの span4 がある流動的な Bootstrap レイアウトがあります。これは、私が期待するように見え、機能します。行要素の呼び出し.sortable();は機能しますが、ドラッグ中にレイアウトが奇妙に予測不能になります。リンクは次のとおりです: http://jsfiddle.net/dhilowi​​tz /CwcKg/15/ 。アイテム #3 をつかんで左に動かすと、期待どおりに動作します。ただし、アイテム #1 をつかんで右に移動すると、見た目が完全に崩れ、アイテム #3 が次の行に移動します。

JSFiddle: http://jsfiddle.net/dhilowi ​​tz/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;
}
4

2 に答える 2

11

上記の回答を受け入れましたが、他の jQuery + Twitter Bootstrap の衝突をデバッグするのに役立つかもしれないと思うので、暫定的に思いついた解決策を提供したいと思いました。margin-left をすべての .ui-sortable-placeholder に適用する代わりに、開始イベント中にそれらを適用し、並べ替え可能な停止イベント中にそれらを削除しました。またappendTo、ヘルパーを .xml 内ではなく、ドキュメントの本文に追加する必要があることも指定していました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/dhilowi​​tz /s7Kch/

于 2013-07-06T11:42:13.593 に答える