jquery的sortable拖拽排序问题，在页面上多次拖拽保存顺序之后，刷新页面，排序出现紊乱

一、前言

这篇博客是因为我在做完拖拽保存之后，测试多次拖拽，然后刷新页面，发现保存的顺序出来紊乱。这就很无奈了啊，打印各项数据才发现，因为保存用的是ajax的方式，所以页面上的列表序号是固定的，比如列表序号是：

1-2-3-4-5   那么把1和5互换位置之后为：
5-2-3-4-1   也就是说，每个列表的序号是固定的

我在保存的时候，是每次拖拽结束之后都保存，所以数据库的顺序相当于一直在变。所以多次拖拽之后，就出现问题了。

二、关于jauery的sortable

这里我就不多说关于拖拽插件的东西了，网上有很多。怕麻烦的老哥可以直接点下面这几个链接，写的都不错：

https://www.cnblogs.com/mailan/articles/4779071.html
http://www.runoob.com/jqueryui/example-sortable.html

三、排序之后，如何获得序号传递给后台

我这边的html结构为：

<table><tbody><tr><td></td></tr><tr></tr></tbody>
</table>

所以获取序号的代码为：

  $("table.sortable tbody").sortable({placeholder: "ui-state-highlight",cancel: ".drag-disabled",axis: "y",opacity: 0.7,stop: function (event, ui) {var sortedIDs = $("table.sortable tbody").sortable("toArray", {attribute: "id"});// console.info(sortedIDs);            // return false;   //这里获取到的是tr的id值的数组集合res = sortedIDs.join(',');  ajax_sort(res);  //这是我保存排序的ajax方法}});

这部分代码就是排序结束后，调用stop方法，进行自己的逻辑操作，保存排序等。保存的话，直接在数据库加上sort字段，按大小排序即可。

四、碰到的问题

1、问题描述

由于我的页面是不刷新的，所以排序之后，数组的序号已经发生改变了，比如：

第一次排序：原序号：1-2-3-4-5   我们把5和1交换一下位置，此时传给后台的顺序是：5,2,3,4,1 数据库存储：1-2-3-4-5排序后： 5-2-3-4-1    这是第一次排序。数据库存储：1-2-3-4-5   此时数据库中，原id为5的数据排序为1.原id为1的数据排序为5第二次排序后：5-2-3-4-1   我们再次进行拖拽，2和4换一下位置传给后台的顺序是：5,4,3,2,1数据库存储是：1-2-3-4-5排序完成后： 5-4-3-2-1数据库存储是：1-2-3-4-5

就是说，页面不刷新的话，每次传的顺序都是依照第一次进入页面排好的顺序。而我们每次在排序结束后
都通过数据库改变了它的排序，所以这种方式的话，会在进行多次排序的时候出现误差。

        这部分可能和我的逻辑有关，我这边的逻辑是根据数据库查出的数组顺序，在静态页面上展示。每次修改也是找到对应键名的键值，直接修改其sort即可。

2、保存部分的逻辑

这部分大家的想法可能都不一样，仅作为参考

foreach( $this->arrShowData as $key=>$v){    //这部分是根据数据库的查询结果，拿出对应的id和sort，组成数组$ids[] = array('id'=>$key,'sort'=>$v['Sort']);}for($i=0;$i<count($arr);$i++){   //   这里的$arr是JS传递过来的顺序值$k = $i+1;  //排序是从1开始，所以这里为 i+1$v = $arr[$i] - 1;   //我这里的ids数组的键名和页面上的顺序值是一一对应的。$sql = "update menu_list set sort = {$k} where id = {$ids[$v]['id']} and sort != {$k}";//进行数据库操作}

3、问题的解决

我这边理想的情况是在每次排序完成之后，都把html元素的序号从1开始有序的排列，这样每次请求后台的时候，都是按照最近的排序结果进行的，排序不会出现错乱。

代码：

  if(data.code === "200"){   //这部分是ajax的success方法内的var ids = $("table.sortable tbody").sortable("toArray", {attribute: "id"});   //请求成功后，拿到当前的id顺序ids = ids.sort(function(a,b){return a-b;    //对id顺序进行排序，从1-99});for(var i in ids){   //排序之后循环赋值，相当于把tr对应的id改成从1-99的$("table.sortable tbody tr").eq(i).attr("id",ids[i]);   //通过逐步往下找到tr的兄弟节点}$("table.sortable tbody").sortable('destroy');  // 每次排序完，退出排序状态，等待下次点击触发return false;}

效果：

每次拖拽结束后，我的顺序在拖拽的基础上回到了原点，这样不管怎么拖拽都不会出问题。精准度也上去了。本来想通过后台部分解决问题的，奈何实在是没找到合适的方案。这里仅供参考。

end