用jQuery.ui.sortable实现拖拽排序

来源：互联网发布：淘宝交保证金的类目编辑：程序博客网时间：2024/06/05 11:35

地址http://jqueryui.com/sortable/ 有详细的sortable的介绍

另外参考：http://stackoverflow.com/questions/7097168/save-jquery-ui-sortable-positions-to-db

这里主要用的sortable排序，然后和update把排序结果保存

需要引用 http://code.jquery.com/jquery-1.8.3.js 和http://code.jquery.com/ui/1.10.0/jquery-ui.js

<ul id="sortable">    <li id="1">elem 1</li>    <li id="2">elem 2</li>    <li id="3">elem 3</li>    <li id="4">elem 4</li></ul>

绑定的时候把数据库中id赋给li的id，$('#sortable').sortable('toArray').toString()就会取得用逗号分隔的id。结果1,2,3,4

<script type="text/javascript">    $(document).ready(function () {

        $('#sortable').sortable({            update: function (event, ui) {                var newOrder = $(this).sortable('toArray').toString();                                $.ajax({type:"get", url:".asp?ids=" + newOrder}).done(function () { });                            }        });        $('#sortable').disableselection();    });</script>

update方法中调用jQuerty.ajax，异步存储到数据库。