10

ほとんどjQuery sortable widgetの場合は正常に機能しますが、、の場合ordered listはnumbering gets botched up when we drag an element。以下は、これを説明するためのサンプルプログラムです。

<!DOCTYPE html>
<html>

    <head>
        <script src="jquery-1.6.2.min.js"></script>
        <script src="jquery-ui-1.8.16.custom.min.js"></script>
        <script>
            $(document).ready(function () {
                $('ol').sortable();
            });
        </script>
    </head>

    <body>
        <ol>
            <li>
                <label for="name">Name</label>
                <input type="text" id="name" />
            </li>
            <li>
                <label for="class">Class</label>
                <input type="text" id="class" />
            </li>
        </ol>
    </body>

</html>

ドラッグする前に：

ここに画像の説明を入力してください

ドラッグ中：

ここに画像の説明を入力してください

ドラッグが完了すると、順序が復元されます。このバグは以前に指摘されていますが、修正されていません。誰かがこれの治療法を見つけましたか？

これがそのフィドルです

4

1 に答える 1

12

placeholderこれは、ソート可能な開始時にリストに自動的に追加されるjqueryUIが原因です。実際には、開始イベントでプレースホルダーを非表示にするか、何も表示されない独自のクラスを作成することができます。

ここにアイデアがあります：

$(document).ready(function () {
    $('ol').sortable({
        start: function( event, ui ){
            $(ui.item).parent().find('.ui-sortable-placeholder').hide();
        },
    });
});

または：

<script>
    $(document).ready(function () {
        $('ol').sortable({placeholder: "sortable-placeholder"});
    });
</script>

<style>
    .sortable-placeholder {display: none;}
</style>

編集：

プレースホルダーの表示を実際にブロックするように設定して、リストの子と見なされないようにすることもできます。

.sortable-placeholder {
    height: 20px;
    display: block;
}

ここで変更されたFIDDLE。

于 2012-12-20T05:57:53.793 に答える