最爱Java

书山有路勤为径,学海无涯苦作舟

ExtJs----拖放

先看最简单的拖放:

1new Ext.dd.DDProxy('block');
2//对应的HTML部分代码
3<div id="block" style="background:red;">&nbsp;</div> 

拖放组件的体系

    
简单来说,左面4个组件都是可以随意拖动的。拖动起来后,直接把他们放到右面那些定义好的区域中。proxy表示可以拖动的对象,target表示拖动的目的地。

 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2<HTML>
 3 <HEAD>
 4  <TITLE> New Document </TITLE>
 5        <link rel="stylesheet" type="text/css" href="ext-2.3.0/resources/css/ext-all.css" />
 6        <style type="text/css">
 7            .red-row{background-color:red!important;}
 8            .yellow-row{background-color:yellow!important;}
 9        
</style>
10        <script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script>
11        <script type="text/javascript" src="ext-2.3.0/ext-all.js"></script>
12        <style type="text/css">
13            HR {
14                clear:both;
15                visibility:hidden
16            }

17            .block {
18                border:1px red solid;
19                margin:10px;
20                min-height:80px;
21            }

22            .item {
23                border:1px green solid;
24                background:green;
25                float:left;
26                margin:10px;
27                width:50px;
28                min-height:50px;
29                text-align:center;
30            }

31        
</style>
32        <script type="text/javascript">
33            Ext.onReady(function(){
34                var proxy = new Ext.dd.DragSource('proxy',{group:'dd'});
35
36                proxy.afterDragDrop = function(target,e,id){
37                    var destEl = Ext.get(id);
38                    var srcEl = Ext.get(proxy.getEl());
39                    srcEl.insertBefore(destEl);
40                }
;
41
42                var target = new Ext.dd.DDTarget('target','dd');
43            }
);
44        
</script>
45 </HEAD>
46 <BODY>
47    <div id="proxy" class="item">item</div>
48    <hr/>
49    <div id="target" class="block">
50        <hr/>
51    </div>
52 </BODY>
53</HTML>
54
55
56

    在34,42行分别定义了可拖动的对象和对象存放的目标。两者具有相同的分组标志dd。只有相同的目的地才能接受可拖放的对象。36-40行则是为拖放增加一些效果而已。

拖放的事件
    
startDrag, onDrag, onDragDrop, endDrag是第一类拖放事件函数,他们构成了拖放的主要过程:
        startDrag(int x, int y):开始拖放事件,参数是x和y的坐标值。
        onDrag(Event t):正在拖放事件,当拖放一个对象时触发,参数是mousemove鼠标移动事件。
        onDragDrop(Event e, String|DragDrop[] id):正在放下事件,当一个对象放到另一个DragDrop对象上时触发,第一个参数是mouseup鼠标放开事件,第二个参数表示drop的目标位置。如果是在POINT模式下,就会传入目标元素的id;如果是在INTERSECT模式下,则会传入放下目标的拖放对象数组。
        endDrag(Event e):拖放结束事件,在拖放操作结束之后触发,参数是mouseup鼠标放开事件。
    
    onDragEnter, onDragOut, onDragOver, onInvalidDrag是第二类事件,他们细化了用户拖动对象的过程。
        onDragEnter(Event e, String|DragDrop[] id):进入drop区域事件,拖放过程中首次触碰到drop区域时触发。第一个参数是mousemove鼠标移动事件,第二个参数表示drop目标位置。如果是在POINT模式下,就会传入目标元素的id;如果是在INTERSECT模式下,则会传入放下目标的拖放对象数组。
        onDragOut(Event e, String|DragDrop[] id):离开drop区域事件,拖放过程中从drop区域离开时触发。第一个参数是mousemove鼠标移动事件,第二个参数表示drop目标位置。如果是在POINT模式下,就会传入目标元素的id;如果是在INTERSECT模式下,则会传入放下目标的拖放对象数组。
        onDragOver(Event e, String|DragDrop[] id):在drop区域中拖放移动事件,当在drop区域拖放移动时触发。第一个参数是mousemove鼠标移动事件,第二个参数表示drop目标位置。如果是在POINT模式下,就会传入目标元素的id;如果是在INTERSECT模式下,则会传入放下目标的拖放对象数组。
        onInvalidDrop(Event e):不能drop事件,不在drop区域移动时触发,参数是mousemove鼠标移动事件。

    onMouseDown和onMouseUp是第三类拖放事件函数,他们用于对原始鼠标事件进行提示,而且已经融合在前两类拖放事件函数中了。
        onMouseDown(Event e):鼠标按下事件,参数是mousedown鼠标按下事件。
        onMouseUp(Event e):鼠标放开事件,参数是mouseup鼠标放开事件。  

高级拖放----Basic

 1<script type="text/javascript">
 2
    Ext.onReady(function(){
 3    dd1 = new Ext.dd.DD("dd-demo-1");
 4    dd2 = new Ext.dd.DD("dd-demo-2");
 5    dd3 = new Ext.dd.DD("dd-demo-3");
 6    });
 7</
script>
 8
 9 <BODY>
10
    <div id="dd-demo-1" class="item"></div>
11
    <div id="dd-demo-2" class="item"></div>
12
    <div id="dd-demo-3" class="item"></div>
13
 </BODY>
    
    以上是最基本的实例,创建了3个可拖动的对象。

高级拖放----Handle
    
    
根据以上示例,我们给三个div添加handler。

 1        <script type="text/javascript">
 2            Ext.onReady(function(){
 3                dd1 = new Ext.dd.DD("dd-demo-1");
 4                    dd1.setHandleElId("dd-handle-1a");
 5                    dd1.setHandleElId("dd-handle-1b");
 6                dd2 = new Ext.dd.DD("dd-demo-2");
 7                    dd2.setHandleElId("dd-handle-2");
 8                dd3 = new Ext.dd.DD("dd-demo-3");
 9                    dd3.setOuterHandleElId("dd-handler-3");
10            }
);
11        
</script>
12 </HEAD>
13 <BODY>
14    <div id="dd-demo-1" class="item">
15        <div id="dd-handle-1a" class="block">H1</div>
16        <div id="dd-handle-1b" class="block">H2</div>
17    </div>
18    <div id="dd-demo-2" class="item">
19        <div id="dd-handle-2" class="block">H</div>
20    </div>
21    <div id="dd-handler-3" class="item">Outer</div>
22    <div id="dd-demo-3" class="item"></div>
23 </BODY>
24


高级拖放----On Top

 1//为OnTop重写监听拖放事件的函数
 2Ext.ux.DDOnTop = function(id, sGroup, config) {
 3    Ext.ux.DDOnTop.superclass.constructor.apply(this, arguments);
 4};
 5
 6Ext.extends(Ext.ux.DDOnTop, Ext.dd.DD, {
 7    origZ:0,
 8
 9    startDrag:function(x,y){
10        var style = this.getEl().style;
11        this.origZ = style.zIndex;
12        style.zIndex = 999;
13    },
14    endDrag:function(e) {
15        this.getEl().style.zIndex = this.origZ;
16    }
17});

    然后只要创建Ext.ux.DDOnTop的对象就可以了。

高级拖放----Proxy
    
所谓代理(Proxy),就是拖放时原div不动,跟随鼠标移动的是一个名为Proxy的拖放。如果需要拖动的对象十分复杂,每次都让它跟随鼠标移动,很可能会使浏览器负荷过大,甚至出现页面停顿的现象。这时就需要使用代理来避免重复渲染复杂对象。
    为了使用代理,最简单的方法就是把原来的Ext.dd.DD改成Ext.dd.DDProxy,如:
         dd1 = new Ext.dd.DDProxy("dd-demo-1");
    这样就会出现一个只有外框的空白Proxy,如果我们希望自定义Proxy的形式,也可以制作,如:
        dd3 = new Ext.dd.DDProxy("dd-demo-3","default",{
            dragElId : "dd-demo-3-proxy",
            resizeFrame : false
        });
    为了实现自定义Proxy,我们在创建DDProxy时需要设置3个参数。第一个参数是对应的div的id;第二个参数是拖放的组,只有同组的Drag才能放到同组的Drop上;第三个参数是附加参数。
    dragElId的值是我们自定义的proxy,而resizeFrame : false告诉EXT不用使proxy的大小与原div一样。
    为了使proxy与dd-demo-3对应,我们还需要在HTML中加入:
        <div id="dd-demo-proxy">proxy-3</div>

高级拖放----Grid

1dd1 = new Ext.dd.DD("dragDiv1");
2dd1.setXConstraint(1000,1000,25
);
3dd1.setYConstraint(1000,1000,25);

    注意setXConstraint()和setYConstraint()两个方法,其所带的参数表示左侧/上侧最远距离,右侧/下侧最远距离,每次移动距离。
   

posted on 2009-10-23 23:42 Brian 阅读(3086) 评论(0)  编辑  收藏 所属分类: JScript


只有注册用户登录后才能发表评论。


网站导航:
 

公告


导航

<2009年10月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

统计

常用链接

留言簿(4)

随笔分类

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜