Jquery可排序改变元素数量？

Question

我正在使用简单的 Jquery 可排序，用户可以拖放元素，但在每个元素上我都有一些数字，在加载屏幕上所有数字都是按顺序排列的，但我需要有人重新排序元素来自动更改该数字他的选择。这是我所拥有的工作 fiddle

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 并将所有其他数字重新排序时，我需要什么，就像我将数字 4 移动到第一个位置将其更改为 1，并且首先在新的 1 下更改该数字数字到 2 及更多

Answer 1

该插件有 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 + '');
            });
        }
    });
});

看看Fiddle !