<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()里函數(shù)有個參數(shù)代表span集合中當(dāng)前元素的下標(biāo)（從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標(biāo)簽設(shè)置相應(yīng)的標(biāo)號，通過js排序進(jìn)行排列了，還需要寫很多代碼。

不過這一節(jié)課的目的就是讓你了解這個方法即可。