现在的位置: 首页 > 综合 > 正文

五步掌握Ext的拖放(下)

2013年09月18日 ⁄ 综合 ⁄ 共 2467字 ⁄ 字号 评论关闭
文章目录

接上篇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框架中很多组件都可以使用拖放,总之不一而足。通过下面不同的例子来继续进一步深化拖放操作的学习(官方的):

摘要

今天的学习过程中,我们了解了怎么使用最底层的拖放类实现来进行DOM节点的完整拖放。希望阁下能收获到DD操作的一些基本操作原理,并且我们希望,在以后的日子,可以就该方面写更多的文章。

 

抱歉!评论已关闭.