`
李俊良
  • 浏览: 144781 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

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

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

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

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

 

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

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

相关推荐

    Extjs中文教程

    - 用于选择日期的弹出式控件,内置了许多实用功能,如日期范围选择、快捷键等。 - 通过简单的配置就可以实现复杂的需求。 #### 九、数据与ComboBox - **数据在这里是动词** - 数据在Extjs中不仅仅是指存储的...

    lhgdialog DIV弹出窗口框架

    而其它弹出 窗口(比如:JQuery,ExtJs,Mootools,还有其它弹出窗口等)CUP的占有率都在50%左右,最高60%以上。 窗口样式更改简便:组件采用的是QQ2009窗口的界面,虽说不上很漂亮,但也不算难看(本个界面设计...

    ExtJS帮助文档

    ### ExtJS基础知识与应用 #### ExtJS简介 ExtJS是一款基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和强大的工具集,可以帮助开发者快速构建现代化的Web应用程序。无论是Ext库的新手还是想要深入了解...

    Extjs xtype集合

    - **描述**: 一个弹出窗口,可以用于对话框或模态窗口。 2. **`viewport`:** - **`xtype`**: `viewport` - **`Class`**: `Ext.ViewPort` - **描述**: 视口组件,表示浏览器的可视区域,能够根据浏览器窗口大小...

    ExtJS的xtype列表

    - `window`: 创建浮动的弹出窗口,可以包含任意组件。 - `viewport`: 应用程序的主视图,占据整个浏览器窗口,随窗口大小变化而变化。 - `box`: 基础的布局容器,类似于HTML的`<div>`。 - `component`: 通用组件...

    ExtJs_xtype一览

    - `window`:`Ext.Window`,创建可弹出的浮动窗口,具有关闭、最大化、最小化等特性。 - `viewport`:`Ext.ViewPort`,全屏容器,与浏览器视口大小一致,可以自动调整大小。 - `box`:`Ext.BoxComponent`,基本的...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -从Region控件中删除SplitColor属性,增加CollapseMode, EnableSplitTip, SplitTip, CollapsibleSplitTip属性(feedback:bmck)。 -BorderPanel更名为RegionPanel。 -DropDownList拥有MarkInvalid方法(feedback:sun...

    extjs控件列表

    - **用途**: 创建独立的弹出窗口,用于显示额外信息或执行特定操作。 **Ext.ViewPort** - **描述**: 代表浏览器的可视区域,可自动调整大小以适应窗口尺寸变化。 - **用途**: 作为主布局容器,确保页面内容在不同...

    ExtAspNet_v2.3.2_dll

    -从Region控件中删除SplitColor属性,增加CollapseMode, EnableSplitTip, SplitTip, CollapsibleSplitTip属性(feedback:bmck)。 -BorderPanel更名为RegionPanel。 -DropDownList拥有MarkInvalid方法(feedback:sun...

    利用Ext Js生成动态树实例代码

    - 每个部门节点需要支持右键单击事件,触发后应弹出一个含有相关操作的菜单。 ### 关键类介绍 在实现动态树的过程中,主要涉及到两个关键类:`Ext.tree.TreeNode`和`Ext.menu.Menu`。 - `Ext.tree.TreeNode`:这是...

Global site tag (gtag.js) - Google Analytics