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

原创于 2013-02-05 17:00:24 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何利用jQuery UI库中的Sortable功能实现网页元素的动态排序，并将排序结果同步保存至数据库的过程。通过引用jQuery和jQuery UI的JS文件，我们可以在页面上创建可拖动的列表项，用户可以手动调整元素顺序，同时系统会实时记录这些变化，并通过AJAX请求将排序信息持久化存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地址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，异步存储到数据库。