首先引入jQuery库和jquery-ui.min.js,接着放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值 。

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type='text/javascript' src='js/jquery-ui.min.js'></script>
3. <div ></div>
4. <div >
5. <input type="hidden" value="<?php echo $sort; ?>" />
6. <!--?php
7. for ($i = 0; $i < $len; $i++) {
8. ?-->
9. <div class="modules" title="<?php echo $sort_arr[$i]; ?>">
10. <h3 class="m_title">Module:
11. <!--?php echo $sort_arr[$i]; ?--></h3>
12. <p>
13. <!--?php echo $sort_arr[$i]; ?--></p>
14. </div>
15. <!--?php } ?-->
16. <div class="cl"></div>
17. </div>

页面js:

1. $(function() {
2. $(".m_title").bind('mouseover',
3. function() {
4. $(this).css("cursor", "move")
5. });
6. var $show = $("#loader"); //进度条
7. var $orderlist = $("#orderlist");
8. var $list = $("#module_list");
9. $list.sortable({
10. opacity: 0.6,
11. revert: true,
12. cursor: 'move',
13. handle: '.m_title',
14. update: function() {
15. var new_order = [];
16. $list.children(".modules").each(function() {
17. new_order.push(this.title);
18. });
19. var newid = new_order.join(',');
20. var oldid = $orderlist.val();
21. $.ajax({
22. type: "post",
23. url: "update.php",
24. data: {
25. id: newid,
26. order: oldid
27. },
28. //id:新的排列对应的ID,order：原排列顺序
29. beforeSend: function() {
30. $show.html("<img src='images/load.gif' /> 正在更新");
31. },
32. success: function(msg) {
33. $show.html("");
34. }
35. });
36. }
37. });
38. });

拖动后保存到数据库，ajax.php中的代码：

1. $order = $_POST['order'];
2. $itemid = trim($_POST['id']);
3. if (!emptyempty($itemid)) {
4. if ($order != $itemid) {
5. $query = mysql_query("update sortlist set sort='$itemid' where );
6. if ($query) {
7. echo $itemid;
8. } else {
9. echo "none";
10. }
11. }
12. }