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

本文详细介绍了如何利用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

ui

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值