实例：实现前端拖拽排序后，后端处理排序

最新推荐文章于 2025-07-04 15:53:47 发布

PHP神奇的胖虎

最新推荐文章于 2025-07-04 15:53:47 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： PHP经验分享文章标签： PHP即时排序拖拽排序无限拖拽

禁止转载至其它平台，转载至博客需带上此文链接。

本文链接：https://blog.youkuaiyun.com/a1351218627/article/details/88314772

最近在对人人商城进行二次开发时需要完善自定义用户字段，对字段进行实时排序；接下来分享拖拽排序思路，以下排序效果不适合数据量大的排序，适合后台管理系统。
首先需要明白是以什么进行排序，这里是用表中的sort字段进行排序，sort的值与id相同，这样避免拖动改变id时造成id的混乱。
总体的思路是将排序过后的sort与排序前的sort进行验证，变动过的则更新。
前端排序：采用jquery-ui中的sortable来实现拖拽排序，自行参考官方文档
排序效果如下：
实现前端拖拽排序后台处理排序
前端将排序后的id以数组的形式发送到后端：
传到后端的数据如下：

ids[]: 2
ids[]: 1
ids[]: 4
ids[]: 6
ids[]: 15
ids[]: 16
这是排序过后的id数组(Array)
采用jquery-ui中的sortable来实现拖拽排序，

前端ajax代码如下：

 <script>
        $( function() {         
            $( "xxx" ).sortable({
              cancel: 'xxx',	
              items: 'xxx',
              update : function(event, ui) //update这段是核心，其他请自行参考官方文档
			  {//更新排序之后
                $.ajax({
                    url: "Controller/sorts",//后端处理地址
                    type: 'POST',
                    data