从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区域，这样拖动就失效了。