一、导入js。导入jquery.dragsort.js外还需要导入jQuery。
二、HTML部分
<!DOCTYPE html>
<html>
<head>
<title>DragSort Example </title>
<meta charset="utf-8" />
<link href="desktop.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
font-family: Arial;
font-size: 12pt;
padding: 20px;
500px;
margin: 20px auto;
border: solid 1px black;
}
h1
{
font-size: 16pt;
}
h2
{
font-size: 13pt;
}
ul
{
350px;
list-style-type: none;
margin: 0px;
padding: 0px;
}
li
{
float: left;
padding: 5px;
120px;
height: 120px;
}
li div
{
90px;
height: 50px;
border: solid 1px black;
background-color: #E0E0E0;
text-align: center;
padding-top: 40px;
}
.placeHolder div
{
background-color: white !important;
border: dashed 1px gray !important;
}
</style>
</head>
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<form method="post" action="Default.aspx" id="form1">
<div>
<ul id="gallery" runat="server">
<li data-itemid='0'>
<div>
green</div>
</li>
<li data-itemid='1'>
<div>
white</div>
</li>
<li data-itemid='2'>
<div>
yellow</div>
</li>
<li data-itemid='3'>
<div>
red</div>
</li>
</ul>
<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
<script type="text/javascript">
$("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
function saveOrder() {
var data = $("#gallery li").map(function () { return $(this).data("itemid"); }).get();
// alert(data);
$.ajax({ url: "Default.aspx/SaveOrder", data: '{arr:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });
};
</script>
<div style="clear: both;">
</div>
</div>
</form>
</body>
</html>
三、后台部分
[WebMethod]
public static void SaveListOrder(int[] arr)
{
//这里就是你要做的操作，比如修改顺序保存到数据库...
for (int i = 0; i < arr.Length; i++)
{
int id = arr[i];
int ordinal = i;
//...
}
}
最后分奉上源码供大家参考：http://files.cnblogs.com/files/chenghu/JqueryUI%2C%E6%8B%96%E6%8B%BD%2Cdragsort.rar
压缩包解压密码： 111211