欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-10 14:54:03
关于sortable的在有滚动轮情况下的拖拽问题下面展示一些图片。蓝色区域的tbody是拖拽区域,当两个拖拽区域不需要滚动时(相当于在同一页面能够显示)这时候能够正常拖拽蓝色区域的tbody是拖拽区域,当两个拖拽区域需要滚动时(相当于不在同一页面能够显示)这时候拖拽便没有反应.在网上百度和google都找了一下发现有许多解决办法下面展示一些 解决代码。产生此现象的原因应该是滚动时候影响到了item的坐标这个方法表示滚动框滚动时重新去刷新item的坐标第一种方法sortdata...

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

下面展示一些图片。

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

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

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

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


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

第一种方法

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

第二种方法


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

解决了此现象之后又出现另一个问题:看如下图
关于sortable的在有滚动轮情况下的拖拽问题
排序之后拖拽区域全部发生了错位,之前也出现过错位问题,但是只需要加一个属性就解决

这个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

相关标签: js java html