关于sortable的在有滚动轮情况下的拖拽问题

下面展示一些图片。

蓝色区域的tbody是拖拽区域，当两个拖拽区域不需要滚动时(相当于在同一页面能够显示)这时候能够正常拖拽

蓝色区域的tbody是拖拽区域，当两个拖拽区域需要滚动时(相当于不在同一页面能够显示)这时候拖拽便没有反应.

---

在网上百度和google都找了一下发现有许多解决办法
下面展示一些 解决代码。
产生此现象的原因应该是滚动时候影响到了item的坐标
这个方法表示滚动框滚动时重新去刷新item的坐标

第一种方法

sortdata为tableId
$("#sortdata").scroll(function() {
    $( "#sortdata").sortable( "refreshPositions" ); //触发滚动时刷新位置信息
  //  $( "#sortdata").sortable( "refresh" ); //这个功能与上面一样
});

第二种方法

将此事件添加到了sortable中：
start: function( event, ui ) {
    $( this ).sortable( 'refreshPositions' )
},
我认为这似乎可以解决问题，因为我认为在创建辅助函数之后会调用start（），因此刷新位置会重置高度。

解决了此现象之后又出现另一个问题：看如下图

排序之后拖拽区域全部发生了错位,之前也出现过错位问题，但是只需要加一个属性就解决

这个clone能够解决没有refreshPositions的时候的拖拽后item的大小变化问题`。

$("#sortdata").sortable({ 
    helper:"clone"
})

所以需要自己写一个属性能够在拖拽后保持所有的区域大小不变

// $('#sortdata tr').children() 表示table下的每一个td
var fixHelper = function(e, ui) {     
    $('#sortdata tr').children().each(function() {  
        $(this).width($(this).width());//保持每一个td的宽度不变
    });  
    return ui;  
};
$("#sortdata").sortable({ 
    helper:fixHelper 
})

OK! 果然此时问题全部解决

本文地址：https://blog.csdn.net/smallITAA/article/details/111030501