先看最简单的拖放：
1
new Ext.dd.DDProxy('block');
2//对应的HTML部分代码
3<div id="block" style="background:red;"> </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()两个方法，其所带的参数表示左侧/上侧最远距离，右侧/下侧最远距离，每次移动距离。