<ul>

                    <li><span>1</span>)足球</li>

                    <li><span>2</span>)散步</li>

                    <li><span>3</span>)篮球</li>

                    <li><span>4</span>)乒乓球</li>

                    <li><span>5</span>)骑自行车</li>

                </ul>

<script type="text/javascript">

            $(function () {

                $("ul").sortable({

                    delay : 2,

                    opacity : 0.35,

                    stop:function(){

                        $("li>span").each(function(index){

                            $(this).html(++index);

                        })

                    }

                })

            });

        </script>

each()里函数有个参数代表span集合中当前元素的下标（从0开始）的，所以直接用这个++index就好了

还不如直接在html代码里把ul改成ol

 <div class="content">
                <ul>
                    <li><span>1</span>足球</li>
                    <li><span>2</span>散步</li>
                    <li><span>3</span>篮球</li>
                    <li><span>4</span>乒乓球</li>
                    <li><span>5</span>骑自行车</li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("ul").sortable({
                    delay:3,
                    opacity:0.35,

                    stop:function(index){
                    var index=0;
                   $('li>span').each(function(){
                       $(this).html(++index);
                   })
                }



                    
                })
                
            });
        </script>

这就需要再将每个li标签设置相应的标号，通过js排序进行排列了，还需要写很多代码。

不过这一节课的目的就是让你了解这个方法即可。