日期:2014-05-16  浏览次数:20378 次

从ExtJS分析拖动层的实现原理--弹出DIV问题

自己也写过拖动层,简单的说就是利用时间捕获,然后动态改变指定div的left和top值来实现,具体实现可以参阅相关文章。

但是我发现有个很重要的bug,就是拖动的div层会在快速拖动的时候有点延时的感觉

通过firebug调试其实可以看到,在进行left和top值改变的时候,本身就会产生left和top值修改不即时的问题,所以这种拖动问题比较严重。

但是自己看extjs里面的拖动层却一点没有问题,然后我通过firebug看到,当点击拖动层的时候,实际上是创建了一个id为ext-gen-数字 的一个层,并且层的样式为x-panel-ghost,这些东西就可以看出,就是克隆了一个层;还有就是同时能看到在firebug里面被拖动层的样式有改变,它的left和top都变成了-17000多,还有将可见设置为了不可见。

?

从这些可以看出,这种做法将被拖动层隐藏在浏览器显示不出来的地方,然后克隆一个层,并且这个层跟随鼠标移动,等到释放鼠标的时候,将这个层消失,并且将以前的那个层的位置直接改变,移动到指定位置。

1 楼 Hafeyang 2010-12-11  
这样拖动层还有一个巧妙的地方是,如果是一个iframe拖动,按照平常的写法,拖动起来比较慢,有可能会鼠标到了iframe区域,这样拖动就失效了。