jquery的sortable拖拽排序插件，顺序没发生改变则不请求

一、前言

前几天刚做完排序，本来以为没什么问题的，结果今天被告知要优化一下。。功能上是没问题，但是有一些小细节需要优化。比如我做的是每次拖拽完成之后，都在stop方法里面请求ajax保存顺序。但是要考虑到，有时候用户拖拽之后，又把这个拖拽的部分放回原地，相当于并未发生顺序改变。那么此时发请求就不是很合适的了。

以下为大佬原话：
对于一些不必要的操作，无需发请求。比如我们的拖动排序事件。应该确保当顺序改变的时候再发送http请求。仅仅是拖动但没有改变位置的，不需要发送请求。这样在用户访问量比较多的情况下，不会有太大的访问压力

二、解决方案

既然没有顺序改变就不发送http请求，那么我们就要在ajax请求之前判断顺序是否改变。本来我只用到了sortable的stop()方法，如果要在拖拽结束之前就获取一遍顺序的话，最好是使用start()方法。

关于更多sortable的方法，请参考：jQuery sortable使用详解

1、在start部分获取排序

//提前获取当前页面的排序
   start:function(event,ui){
               res = $("table.sortable tbody").sortable("toArray", {attribute: "id"});
           },

这里要注意，获取的排序会不标准，有一个空的值。比如点击第三个进行排序，则打印出来的序号为：

1,2,3,,4,5..

比如此处，3后面有一个空值，需要去掉它

2、获取此时用户点击拖拽的元素

//这里使用的是ui这个对象，大家可以打印一下ui.item，看一下里面都有什么，然后根据这个东西，就可以获取当前用户点击拖拽的元素是哪个
  stop: function (event, ui) {
              var  select_item = ui.item[0].id; 
              }

既然知道用户拖拽的是哪个了，那我们截取一下刚才获取的数组，把空值去掉，此时的数组才是正常的。

//通过jquery的splice来去掉那个空的数组值
 res.splice(select_item,1);

3、在stop部分再获取一次排序，并比较

stop: function (event, ui) {
              var  select_item = ui.item[0].id; //代表选中的元素，这里有个问题，比如选中的为4，则res的4后面有两个‘,’逗号，需要去掉一个
                res.splice(select_item,1);
                var sortedIDs = $("table.sortable tbody").sortable("toArray", {attribute: "id"});
                if(res.toString() === sortedIDs.toString()){    //两次比较的数组相同，则不请求
                    console.log(1);
                }else{
                    var params = sortedIDs.join(',');             //两次比较的数组不同，则进行ajax请求
                    ajax_sort(params);
                }
            }

这部分要注意，js的两个数组之间是不能直接比较是否相同的。所以咱们这里通过转化为字符串来进行比较。

 if(res.toString() === sortedIDs.toString()){

这样就实现了我们的需求，当顺序不同的时候，则发起http请求。当用户拖拽完之后，顺序不变的话，则咱们也不管，如此便可节省网络资源。

end