五步掌握Ext的拖放(下)
来源:互联网 发布:傲剑金蛇升级数据 编辑:程序博客网 时间:2024/06/14 08:28
接上篇URL:http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx。
第三步:设置置下目标
明确需求是怎么样的:除了 rented和repair可接纳拖动元素,cars和trucks本身也是可以的。总之是使用 DDTarget来负责放下的目标。代码如下:
上述代码中,为 cars、trucks、 rented 和repair设置了置下目标。注意cars容器的元素只能参与“carsDDGroup”的拖动,trucks容器的元素只能参与“trucksDDGroup”的拖动。接着是rented 和 repair 的DDTarget设置,这里有构造器的定义carsDDGroup,也有addToGroup方法加入的trucksDDGroup,两种途径皆可。
OK,已经设置好置下目标了。下面是有效置下后的结果。
点击图片打开演示。
我们看见这些拖动元素的确是成功到达目的地,可是图片摆放的乱七八糟,还是要整理一下才行,也就是继续所说的“完成置下complete drop”的这一步骤。同样也是重写DD实例的方法。
第四步:完成置放
实质是用DOM方法把始发点的元素改换到目标父级元素上。重写下面的onDragDrop方法。
不在同一drop区域里面的才算完成投放置下。同一个target目标没意义,视作无效drop,故执行onInvalidDrop。
点击以上图片观看完整的置下操作。
只要可以成功置下,父级元素辖下的元素就不复存在,移动到置下目标上。
如果拖动的时候进入了有效地目标范围内,用户是不是应该给予他们一点提示呢?下面的就是一个drop邀请,就是告诉用户您快来吧,可以置下喽。
第五步:加入邀请置下(drop invitation)
如上述,此时此刻我们重写的是 onDragEnter 以及 onDragOut方法。
当然了,onDragEnter 以及 onDragOut只会在同一个DD组里面的交互才会生效。
onDragEnter 方法在鼠标指针刚刚碰到置下区域其边缘的时候就会触发,反之,onDragOut方法就是离开边缘的时候就会立刻触发。
点击以上的图片演示drop邀请。
通过演示,我们可以看进入可投下的区域的时候就会高亮的现实效果(周围是绿色的),离开该一区域就不会显示。
继续阅读
Ext JS框架中很多组件都可以使用拖放,总之不一而足。通过下面不同的例子来继续进一步深化拖放操作的学习(官方的):
- GridPanel to GridPanel
- Grid to FormPanel
- Ext.form.Field to GridPanel cell
- Use of DragZone and DropZone
- DataView to TreePanel
摘要
今天的学习过程中,我们了解了怎么使用最底层的拖放类实现来进行DOM节点的完整拖放。希望阁下能收获到DD操作的一些基本操作原理,并且我们希望,在以后的日子,可以就该方面写更多的文章。
- 五步掌握Ext的拖放(下)
- 五步掌握Ext的拖放(上)
- 五步实现文件的拖放功能
- EXT 树的拖放
- 五步掌握Git的基本开发使用命令
- Ext的拖放官方案例研究
- 五步轻松搞定Linux下的文件同步(备份)
- 五步轻松搞定Linux下的文件同步(备份)
- 五步轻松搞定Linux下的文件同步(备份)
- Ext拖放深入分析
- EXT JS4 拖放实例
- Ext表格拖放排序
- Qt学习笔记(五)拖放
- Ajax的五步使用
- Ext Js 表格(五)
- ExtJs4学习(五)最基本的Ext类
- ext下的grid
- 【第三步】熟练掌握设计UI界面的方法
- aa
- SQL字符串函数
- IT 人士工作中的十不要!
- dreamweaver新发现和我的错误
- 自己学会汉化DevExpress控件
- 五步掌握Ext的拖放(下)
- 软件工程方法学探究
- 创建一个HttpResponse对象
- java 获取文件名(无后缀名)
- 大家好
- jQuery工作原理解析以及源代码示例
- linux 2.6.22.1内核在s3c2410平台的移植(完美版)
- 上海世博会信息化八大看点
- BEA Weblogic92 配置Oracle连接池