jQuery-UI插件拖动排序sortable的自动滚动无效问题解决方法

相信拖动排序不少人会用到过，本次的项目为了更实用也使用了sortable插件

基本的拖动功能和自定义拖动触发元素等毫无问题，用起来体验感觉很棒~

1. 遇到元素列表超出窗口无法拖动的问题

不过通过实际应用发现，在部分情况下会出问题，比如当被拖动元素需要放到超出浏览器窗口的地方时，就会发现无法拖动过去！！

通过百度大法查找sortable使用教程，确实是找到了响应的功能，当时感觉jQuery真的牛逼啊。。

2.遇到sortable自动滚动事件（功能）无效的问题

 我通过多次尝试依然无法使用该功能，可能当时sortable写的时候也没有过多测试吧！包括完善的参数配置和多个版本尝试依然无果

 于是考虑自己写了个简化版的自动滚动滚动条功能。。。。

不多说，下面贴出代码给大家

//主要是js代码部分

//自定义移动滚动条函数，其实也就是修改被卷去高度
//direction 方向；scrollSpeed 移动距离，单位px；top 被卷去高度；
function scrollW(direction, scrollSpeed, top){
    direction = direction || "TOP";
    scrollSpeed = scrollSpeed || 20;
    if(direction=="TOP"){
        $(document.body).scrollTop(top - scrollSpeed);
    }
    else{
      $(document.body).scrollTop(top + scrollSpeed);
    }
}

//sortable插件调用部分 原理通过sortable插件自带的sort元素排序坐标改变实时回调函数，来实时滚动页面
//插件自带的用不了，只能自己写个类似的，将就用着 写的很菜，分享出来大家互相学习了，欢迎各位大牛帮忙改进
//其中 移动距离 是可以自定义的，请根据实际需求改哦

$(document).ready(function(){
  $(".table tbody").sortable({
    opacity: 0.6, //透明度
    handle: ".sortable", //拖动触发元素
    delay: 100, //拖动生效延迟
    start: function(event, ui){
        //排序开始代码
    },
    sort: function(event, ui) {
      
      var scrollTop   = $(document).scrollTop();//文档卷去的高
      var elOffsetTop  = $(ui.item).offset().top;//元素距离文档顶部的高
      var height1    = elOffsetTop-scrollTop;//元素距离窗口顶部的高
      var bodyHeight  = $(document).height();//文档的高
      if(scrollTop>=0 && height1<=80){
        //计算是否靠近屏幕顶部边缘
        scrollW("TOP", 60, scrollTop);
        //console.log("已靠近屏幕顶部边缘："+height1);
      }
      else{
          //计算是否靠近屏幕底部部边缘
          var countheight = $(window).height() + scrollTop;
          var height2 = scrollTop + $(window).height() -elOffsetTop;
          if(height2 <= 100 && bodyHeight > countheight){
            //console.log("已靠近屏幕顶部边缘："+height2);
            scrollW("BOTTOM", 60, scrollTop);
          }
      }
    },
    stop: function(event, ui) {
        //排序结束代码
    } 
  });
});

3.我通过实际项目测试效果还算符合预期，就是滚动时的细节方面没时间搞了，有时间的大神研究一下吧

 如果你更好的优化版本，欢迎联系我QQ邮箱反馈~

 QQ邮箱：chenmwl@qq.com