0

jqueryソート可能を有効にしようとしている次のマークアップがあります:

<div>
    <div id="sortable">
        <div style="height:200px;width:400px;border:1px solid black;float:left;">Item 1</div>
        <div style="height:200px;width:400px;border:1px solid black;float:right;">Item 2</div>
    </div>
</div>

以下は私のjavascriptです：

$(function () {
        $("#sortable").sortable({
            placeholder: "ui-state-highlight"
        });
        $("#sortable").disableSelection();
    });

フロートを削除して div をスタックできるようにすると、正常に動作します。float が含まれていて、画面の両側に 1 つの div があると、並べ替えは機能しません。実際、プレースホルダー スタイルが指定されていると、プレースホルダーは 2 つの div が配置されている「行」の全長にまたがるように見えます。

どんな助けでも大歓迎です。

動作しない代表的なサンプルについては、次を参照してください: http://jsfiddle.net/5kx5C/2

4

2 に答える 2

0

#sortable div の css を明確にする必要があると思います (この例では、項目 1 と項目 2 の div を 300 ピクセル幅に縮小することを前提としています。ニーズに合わせてこれらの値を調整する必要がある場合があります)。

#sortable { width: 700px; height: 150px; padding: 0.5em; }

#item1 { width: 300px; height: 100px; border: 1px solid #444; }
#item2 { width: 300px; height: 100px; border: 1px solid #444; }

#sortable > div { float: left; }

</p>

この例は機能しているようです...

http://jsfiddle.net/gefZm/5/

于 2012-06-19T16:28:03.290 に答える