Ext拖放深入分析

来源：互联网发布：安装淘宝镜像cnpm失败编辑：程序博客网时间：2024/05/18 18:18

1.拖放简介

EXT中的拖放有如下功能：

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

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

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

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

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

2.拖放的简单运用

-->-->

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

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

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

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

Ext拖放深入分析 - kai - kaizhongfan的博客

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部分：

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

Ext拖放深入分析 - kai - kaizhongfan的博客

图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部分代码如下

5.2 Handle

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

两个把手

</div>

一个把手

</div>

外部把手

<div id = “id-handle-3” class = “dd –ourter-handle”>Outer</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