JqueryUI sortable Bug修复


因为想要拖动组件的效果,于是就使用JqueryUI插件来弄。

本来用得好好地,但是涉及到多个组件排序的时候(sortable)功能,组件相对于鼠标产生了错位,如图:


可以看到,鼠标所在位置与红框框住的组件(clsss="ui-sortable-helper")产生了错位,而同样作为JqueryUI sortable插件的占位div(class="ui-sortable-placeholder")却没有问题。

为了更好地看出错位,下图展示了正常情况下的显示效果:



这里需要说明的一点是,如果页面没有产生滚动(即浏览器右侧的垂直滚动条处于最顶端),那么,是不会产生错位的。

所以这个bug肯定是由于scroll产生的。

通过长时间的定位及追踪,最后发现在5465行(JqueryUI版本:1.11.4)的这行语句产生了问题:

po.top += this.scrollParent.scrollTop();


parent.top通过这个语句后,值产生了突变。

注释掉,就好了。

对应的min文件可以使用正则表达式搜索:\+= *this\.scrollParent\.scrollTop\(\)

一共会发现两处,可以两处都去掉,也可以只去掉第二处(下图高亮的部分去掉即可):




研究一下为啥会这样呢?原来,在sortable的时候,JqueryUI会给div添加一个this.cssPosition,让它变成absolute。

就会进入这个if子句,将top的值叠加上滚动的值,就产生了异常了。


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
下面是一个基于jQuery UI Sortable的表格拖拽表头整列都会改变的完整代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI Sortable</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; cursor: pointer; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; border: 1px dashed red; } </style> </head> <body> <table id="sortable"> <thead> <tr> <th data-col="0">Name</th> <th data-col="1">Age</th> <th data-col="2">Country</th> <th data-col="3">Job</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>28</td> <td>USA</td> <td>Developer</td> </tr> <tr> <td>Jane</td> <td>32</td> <td>Canada</td> <td>Designer</td> </tr> <tr> <td>James</td> <td>25</td> <td>UK</td> <td>Manager</td> </tr> </tbody> </table> <script src="//code.jquery.com/jquery-3.6.0.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#sortable thead th").click(function() { var colIndex = $(this).index(); var sortOrder = $(this).hasClass("asc") ? "desc" : "asc"; $(this).closest("table").find("tbody tr").each(function() { var $cell = $(this).find("td").eq(colIndex); var value = $cell.text(); $cell.data("value", value); }); $(this).closest("table").find("tbody tr").sort(function(a, b) { var aVal = $(a).find("td").eq(colIndex).data("value"); var bVal = $(b).find("td").eq(colIndex).data("value"); if (sortOrder === "asc") { return aVal.localeCompare(bVal); } else { return bVal.localeCompare(aVal); } }).appendTo($(this).closest("table").find("tbody")); $(this).closest("table").find("thead th").removeClass("asc desc"); $(this).addClass(sortOrder); }).disableSelection(); $("#sortable").sortable({ axis: "x", handle: "th", placeholder: "ui-state-highlight", start: function(e, ui) { ui.placeholder.width(ui.helper.outerWidth()); }, update: function(e, ui) { var $table = ui.item.closest("table"); var thIndex = ui.item.index(); $table.find("tr").each(function() { $(this).find("td, th").eq(thIndex).detach().appendTo($(this)); }); } }).disableSelection(); }); </script> </body> </html> ``` 上述代码中,我们首先创建了一个表格,其中thead中的每个th元素都有一个data-col属性,用于指示该列的索引(从0开始)。 然后,我们使用jQuery UI Sortable使表头可拖拽排序,并在update事件中实现了拖拽整列的功能。具体来说,我们使用了axis、handle、placeholder、start和update参数来实现这个功能。 最后,我们使用了click事件来实现列排序的功能。具体来说,我们为每个th元素添加了click事件,用于更新tbody中的行的顺序。我们还使用了localeCompare函数来比较字符串的值,并使用addClass和removeClass函数来切换排序方向。 需要注意的是,为了防止拖拽时选择文本,我们使用了disableSelection函数来禁用了文本选择功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值