jquery ui,拖拽,dragsort

一、导入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