jQuery 拖曳排序 & C# code-behind－工作需要筆記

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 40px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
function submit() {
var idsInOrder = [];
$("ul#sortable li").each(function () { idsInOrder.push($(this).text()) });
alert(idsInOrder.join('\n'));
}
</script>
</head>
<body>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>

protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl ul = new HtmlGenericControl("ul");
ul.ID = "sortable";
for (int i = 0; i < 10; i++)
{
//add li
HtmlGenericControl li = new HtmlGenericControl("li");
ul.Controls.Add(li);
li.ID = "li_" + i;
li.InnerText = "img_" + (i + 1);

//add img
Image img = new Image();
img.ID = "img_" + i;
img.ImageUrl = (i + 1) + ".jpg";
li.Controls.Add(img);
}
Panel1.Controls.Add(ul);
}