您的位置:首页 > Web前端 > JQuery

JqueryUI sortable Bug修复

2016-02-20 10:03 387 查看
因为想要拖动组件的效果,于是就使用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的值叠加上滚动的值,就产生了异常了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: