JqueryUI sortable Bug修复

本文介绍了一个JQuery UI Sortable插件在滚动页面时出现的组件错位问题及其解决方法。该问题源于插件在计算组件位置时叠加了滚动偏移值,导致位置计算错误。


因为想要拖动组件的效果,于是就使用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
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值