2

ユーザーが要素をドラッグアンドドロップできる単純なJqueryソート可能を使用していますが、すべての要素にいくつかの番号があり、読み込み画面ではすべての番号が順番になっていますが、誰かが選択に応じてその番号を自動変更するために要素を読み替える必要があります。ここに私が持っているフィドルが働いています

http://jsfiddle.net/4bhb4z1e/

誰かが引っ越したときなどに必要です。番号10が最初にその番号を1に変更し、他のすべての番号を再インデックスする必要がありますか?

ここにコードがあります

<ol class="example">
    <li> <span>1</span>
        <ol></ol>
    </li>
    <li> <span>2</span>
        <ol></ol>
    </li>
    <li> <span>3</span>
        <ol>
            <li><span>4</span>
            </li>
            <li><span>5</span>
            </li>
            <li> <span>6</span>
                <ol>
                    <li><span>7</span>
                    </li>
                </ol>
                <ol>
                    <li><span>8</span>
                    </li>
                    <li><span>9</span>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li><span>10</span>
    </li>
</ol>

JS

$(function  () {
  $("ol.example").sortable()
})

アップデート

今、私はこの1、2、3、4、5などのような構造を持っています.

誰かが 4 を 1 位に移動してその番号を 1 に変更し、他のすべての番号を並べ替えるときに必要なものは、番号 4 を最初に移動して番号を 1 に変更し、最初に新しい 1 の下にあるその番号を 2 に変更する場合です。そしてさらに

4

3 に答える 3

4

そのプラグインにはonDropイベントがあるため、次の方法でコードを更新できます。

$(function () {
    $(".example").sortable({
        onDrop: function ($item, container, _super, event) {
            $('.example li').removeClass('dragged');
            $('.example li').removeAttr('style');
            $("body").removeClass('dragging');
            $('.example span').each(function (i) {
                var humanNum = i + 1;
                $(this).html(humanNum + '');
            });
        }
    });
});

フィドルを見てください！

于 2014-11-10T11:07:48.053 に答える