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

本文探讨了使用ExtJS实现拖动层时的一种高效方法,即通过克隆被拖动元素并将其移至屏幕外,同时展示一个临时元素以模拟平滑拖动效果。这种方法解决了拖动过程中可能出现的延迟问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值