Ext拖放深入分析

1 .拖放简介

EXT 中的拖放有如下功能：

1， 拖放表格里的行，让它们按照指定的方式排列；

2， 拖放树里的节点，把节点从一个枝干拖向另一个枝干；

3， 在表格和树之间进行拖放；

4， 布局的 split 也是一种拖放，可以改变布局的大小；

5， Resize 也算是拖放，改变大小。

2.拖放的简单运用

对于 B/S 系统而言， 拖放一直是一项很少用到的功能。我们一直认为实现拖放功能很复杂，但是在 EXT 中只需要一行代码就可以实现最基本的拖放功能，如下面的代码：

New Ext.dd.DDProxy(‘block’);

对应的 HTML 部分的代码如下所示：

<div id=”block” style=”background: red;”>$nbsp;</div>

如果不进行任何修饰，我们根本无法看到拖放的效果，因为我们为 block 加上了红色的背景色。现在我们可以任意拖动这条红色的 div 了，体验 EXT 为我们提供 的拖放功能：

 

3 拖放组件体系

让我们先看一下拖放的继承关系图：

-> Ext.dd.DD-> Ext.dd.DDProxy -> Ext.dd.DragSource-> Ext.dd.DragZone

Ext.dd.DragDrop

-> Ext.dd.DDTarget -> Ext.dd.DropZone

图 2. 拖放的继承关系图

简单来说，上面的四个组件都是可以随意拖动的。拖动起来以后，直接吧他们放到下边那些定义好的区域中。 Proxy 表示可拖动对象， target 表示拖动的目的地。

我们看了上面的继承图，并对它有了简单的了解，接下来卡看下面的实例，其中的 proxy 是可以 任意拖放的，如下面的代码所示：

var proxy = new Ext.dd.DragSource(‘proxy’, {group:’dd’});

target 告诉我们可以吧上面的 proxy 放到哪些地方，如下面代码所示：

var target = new Ext.dd.DDTarget(‘target’, ‘dd’);

注意到两者之间相同的 dd 了吗？这是分组标志，用来限制拖放的目的地。只有相同组名的目的地才能接收它，好比超市中货架上的商品都是放在指定区域一样。

不过，这也仅仅指示拖放而已，没有任何其他效果。让我们加入一些小技巧，可以让拖放显得更神奇一些，如下面的代码 所示：

proxy.aferrDragDrop = function(target, e, id){

var destEl = Ext.get(id);

var srcEl = Ext.get(proxy.getEl());

srcEl.insertBefore(destEl);

};

从上面的代码可以看出，拖放后会执行上面代码中的对应函数，并通过 id 获 得 target ，然后根据 proxy.getEl() 获得 proxy ，最后把 proxy 添加到 target 中。上述代码运行后的页面 效果如图 6-3 所示。

ps： html部分 ：

< div id = "proxy" style = "background:red" > $nbsp; </ div >

< div id = "target" style = "background:green;height:80;width:100;" > $nbsp; </ div >

当然，为了让拖放效果更清晰明了，我们加 入了很多 CSS 样式。

 

图 3 拖 放效果，只有在到达 target 时才显示对勾。

 

4 拖放事件

拖放相关的类都继承自 Ext.dd.DragDrop ，在 DragDrop 中定义了一系列拖放操作过程中需要使用的事件函数，我们可以通过这些事件 函数对整个拖放过程进行控制。

此处提到的时间与 Ext 事件模型没有任何 关系，它们是专门用于处理拖放的函数。例如： startDrag 、 onDrag 、 onDragDrop 、 endDrag 、 onDragEnter 、 onDragOut 、 onDragOver 、 onInvalidDrop 、 onMouseDown 和 onMouseUp ，这些函数分别代表了不同阶段的拖放过程。在实际使用中，我们需要重写 对应的事件函数，从而监听和处理拖放功能。

上述的事件函数可以分为以下 3 大 类：

-startDrag 、 onDrag 、 onDragDrop 、 endDrag 是第一类，它们构成了拖放的主要过程。

• startDrag(int x, int y) ：开始拖放时间，参数是 x 和 y 的 坐标值；
• onDrag(Event e) ：正在拖放事件，当拖放一个对象事触发，参数是 mousemove 鼠标移动事件；
• onDragDrop(Event e, String|DragDrop[] id) ：正在放下事件，当一个对象放到另一个 DragDrop 对象上时触发，第一个参数是 mouseup 鼠标放开事件，第二个参数表示 drop 的目标位置。如果是在 POINT 模式下，就会 传入目标元素的 id 。如果是在 INTERSECT 模式 下，则会传入放下目标的拖放对象数组；
• endDrag(Event e) ：拖放结束事件，在拖放操作结束之后触发，参数是 mouseup 鼠标放开事件。

 

- onDragEnter 、 onDragOut 、 onDragOver 、 onInvalidDrop 是第二类事件，他们细化了用户拖动对象的过程。

• 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 模式 下，则会传入放下目标的拖放对象数组；
• onInvelidDrop(Event e) ：不能 drop 事件，不在 drop 区域移动时触发，参数是 mousemove 鼠标移动事件。

- onMouseDown 和 onMouseUp 是第三类拖放事件函数，它们用于对原始鼠标事件进行提示，而且已经融合 在前两类拖放事件函数中了。

onMouseDown(Event e) ：鼠标按下事件，参数是 mousedown 鼠标 按下事件。

onMouseUp(Event e) ：鼠标放开事件，参数是 mouseup 鼠标放开事件。

 

5 高级拖放

5.1 Basic

YUI 中包含的 Basic （基础）示例，这个示例是最基本的。

dd1 = new Ext.dd.DD(”dd-demo-1”);

dd2 = new Ext.dd.DD(”dd-demo-2”);

dd2 = new Ext.dd.DD(”dd-demo-3”);

这部分是 javascript代码，创建 3个拖动对象，参数对应 HTML中的 3个 id，让这 3个对象变成可拖动的元素。 HTML部分代码如下

<div id = “dd-demo-1” class = “dd-demo”></div>

<div id = “dd-demo-2” class = “dd-demo”></div>

<div id = “dd-demo-3” class = “dd-demo”></div>

 

5.2 Handle

把手（ handle）就好比菜刀的刀柄，操之以切菜。有三种方式实现 handle。

1. 两个把手

<div id = “dd-demo-1” class = “dd-demo”>

<div id = “id-handle-1a” class = “dd-multi-handle-1”>H1</div>

<div id = “id-handle-1b” class = “dd-multi-handle-2”>H2</div>

</div>

1. 一个把手

<div id = “dd-demo-2” class = “dd-demo”>

<div id = “id-handle-2” class = “dd -handle”>H</div>

</div>

1. 外部把手

<div id = “id-handle-3” class = “dd –ourter-handle”>Outer</div>

<div id = “dd-demo-3” class = “dd-demo”></div>

我们为这些 handle添加功能，如下：

dd1 = new Ext.dd.DD(”dd-demo-1”);

dd1.setHandleElId(“dd-handle-1a”);

dd1.setHandleElId(“dd-handle-1b”);

dd2 = new Ext.dd.DD(”dd-demo-2”);

dd2.setHandleElId(“dd-handle-2”);

dd2 = new Ext.dd.DD(”dd-demo-3”);

dd3.setOuterHandleElId(“dd-handle-3”);

用法很简单，只要调用 Ext.dd.DD的 setHandleElId()函数并绑定对应 handle的 id即可，而 setOuterHandleElId()函数是专门用来指定外部 handle的，通过这些配置，我们就限制用户只能使用 handle对 div进行拖放了。

5.3 On Top

让当前拖放的 div总 在最上。

重写监听拖放事件的 函数：

Ext.ux.DDOnTop = function(id, sGroup, config){

Ext.ux.DDOnTop.superclass.constructor.apply(this, arguments);

};

Ext.extend(Ext.ux.DDOnTop, Ext.dd.DD, {

origz: 0,

startDrag: function(x, y){

var style = this.getEl().style;

this.origZ = style.zIndex;

style.zIndex = 999;

},

endDrag: function(e){

this.getEl().style.zIndex = this.origZ;

}

});

我们定义了一个新对象 Ext.ux.DDOnTop。在拖动的时候，把正在拖放的元素对应的 el的 zIndex树形设置为 999.这个值已经很大了，基本可以保证当前元素一直显示在所有元素的最上面，停 止时再执行 endDrag()，把对应元素 el的 zIndex树形恢复成原来的数据。

下面不需要进行修改了，创建 3个 Ext.ux.DDOnTop对象，就可以实现总在最上的效果。

dd1 = new Ext.ux.DDOnTop(“dd-demo-1”);

dd1 = new Ext.ux.DDOnTop(“dd-demo-2”);

dd1 = new Ext.ux.DDOnTop(“dd-demo-3”);

5.4 Proxy

所谓代理，就是拖放时原 div不动，跟随鼠标移动的是一个名为 proxy的拖放。可以防止需要拖动的对象过大对浏览器造成的负担。

最简单的办法就是吧 Ext.dd.DD改为 Ext.dd.DDProxy，这样就会出现一个只有外框的空白 proxy。

如果我们希望自定义 proxy的形式，如下：

dd3 = new Ext.dd.DDProxy(“dd-demo-3”, “default”, {

dragElId: “dd-demo-3-proxy”,

resizeFrame: false

});

为了实现自定义的 proxy，我们需要在创建时设置 3个参数。第一个参数是对应的 div的 id；第二个参 数是拖放的组，只有同组的 Drag才能放到同 组的 Drop上；第三个参数是附加参数。

dragElId的值是我们自定义的 proxy，而 resizeFrame： false告诉 EXT不用使 proxy的大小与原 div一样。

看下面的代码，第三个 proxy与 dd-demo-3对应，我们还需要在 HTML里加上这个代理对应的 div：

<div id = “dd-demo-3-proxy”>proxy-3</div>

5.5 Group

利用 addToGroup方法：

addToGroup ( sGroup {string} ) : void

Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...

Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belong to as many groups as needed.

Parameters:

• {string} : sGroup

the name of the group

Returns:

• void

注意的是要给 target定义组名：

var slots = [];

//slots

slots[0] = new Ext.dd.DDTarget(“t1”, “topslots”);

slots[1] = new Ext.dd.DDTarget(“t2”, “topslots”);

slots[2] = new Ext.dd.DDTarget(“b1”, “bottomslots”);

slots[3] = new Ext.dd.DDTarget(“b2”, “bottomslots”);

slots[4] = new Ext.dd.DDTarget(“b3”, “bottomslots”);

slots[5] = new Ext.dd.DDTarget(“b4”, “bottomslots”);

第一个参数是 DDTarget对应的 id，第二 个参数就是组名。这里分成了两组。

接下来操作 Ext.dd.DDProxy了，为了高亮显示，我们定义了继承自 Ext.dd.DDProxy的新类型，这些细节不会影响分组操作。

var players = [];

//players

players[0] = new Ext.ux.DDPlayer(“pt1”, “topslots”);

players[1] = new Ext.ux.DDPlayer(“pt2”, “topslots”);

players[2] = new Ext.ux.DDPlayer(“pt1”, “bottomslots”);

players[3] = new Ext.ux.DDPlayer(“pt2”, “bottomslots”);

players[4] = new Ext.ux.DDPlayer(“pboth1”, “topslots”);

players[4] .addToGroup(“bottomslots”);

players[5] = new Ext.ux.DDPlayer(“pboth2”, “topslots”);

players[5] .addToGroup(“bottomslots”);

这样 1、 2号 DDPlayer对应的分组是 topslots； 3、 4号 对应的分组是 bottomslots； 5、 6号绑定到所有的 DDTarget上了。

最后的部分是为 Ext.dd.DragDropMgr设置碰撞检测模式： POINT和 INTERSECT。 POINT对应的值是 0， INTERSECT对应的值是 1，如下面的代码所示：

Ext.dd.DragDropMgr.mode = Ext.get(‘ddmode’).dom.selectedIndex;

Ext.get(‘ddmode’).on(‘change’,function(){

Ext.dd.DragDropMgr.mode = Ext.get(‘ddmode’).dom.selectedIndex;

});

这两者的区别是，在 POINT模式下，当拖放的鼠标进入 DDTarget的范围时才能放下；在 INTERSECT模式下，当拖放的 DDProxy边缘与 DDTarget有重叠时才可以放下。

Ext.ux.DDPlayer的内部很复杂，它继承自 Ext.dd.DDProxy，在内部通过 Ext.dd.DragDropMgr来操作相互之间有关联的元素。

5.6 Grid

示例：

dd1 = new Ext.dd.DD(“dragDiv1”);

dd1.setXConstraint(1000, 1000, 25);

dd1.setYConstraint(1000, 1000, 25);

为拖放对象设置步长，每次拖放时不再平滑移动，而是沿着网格非线性移动。 如果可以根据这个功能自定义页面模板布局，应该是非常不错的。

setXConstraint和 setYConstraint。后面有 3个参数：第一个，左侧（上侧）可以达到的最远距离；第二个，右侧（下侧） 可以达到的最远距离；每次移动的距离。

5.7 Circle

5.8 Region

Ext.ux.DDRegion