<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

var show = jQuery("#show"); //輸出提示 
var orderlist = jQuery("#orderlist"); //原順序 
var check = jQuery("#check"); //是否更新到數(shù)據(jù)庫(kù)

//保存原來(lái)的排列順序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列順序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖動(dòng)進(jìn)行排序"); 
}); 
orderlist.val(order.join(','));

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列對(duì)應(yīng)的ID,order：原排列順序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};

//調(diào)用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果單選框選中，則更新表中排列順序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

//執(zhí)行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});