先看最簡(jiǎn)單的拖放：
1
new Ext.dd.DDProxy('block');
2//對(duì)應(yīng)的HTML部分代碼
3<div id="block" style="background:red;"> </div>
拖放組件的體系
簡(jiǎn)單來(lái)說(shuō)，左面4個(gè)組件都是可以隨意拖動(dòng)的。拖動(dòng)起來(lái)后，直接把他們放到右面那些定義好的區(qū)域中。proxy表示可以拖動(dòng)的對(duì)象，target表示拖動(dòng)的目的地。
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行分別定義了可拖動(dòng)的對(duì)象和對(duì)象存放的目標(biāo)。兩者具有相同的分組標(biāo)志dd。只有相同的目的地才能接受可拖放的對(duì)象。36-40行則是為拖放增加一些效果而已。
拖放的事件
startDrag, onDrag, onDragDrop, endDrag是第一類拖放事件函數(shù)，他們構(gòu)成了拖放的主要過(guò)程：
startDrag(int x, int y)：開(kāi)始拖放事件，參數(shù)是x和y的坐標(biāo)值。
onDrag(Event t)：正在拖放事件，當(dāng)拖放一個(gè)對(duì)象時(shí)觸發(fā)，參數(shù)是mousemove鼠標(biāo)移動(dòng)事件。
onDragDrop(Event e, String|DragDrop[] id)：正在放下事件，當(dāng)一個(gè)對(duì)象放到另一個(gè)DragDrop對(duì)象上時(shí)觸發(fā)，第一個(gè)參數(shù)是mouseup鼠標(biāo)放開(kāi)事件，第二個(gè)參數(shù)表示drop的目標(biāo)位置。如果是在POINT模式下，就會(huì)傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會(huì)傳入放下目標(biāo)的拖放對(duì)象數(shù)組。
endDrag(Event e)：拖放結(jié)束事件，在拖放操作結(jié)束之后觸發(fā)，參數(shù)是mouseup鼠標(biāo)放開(kāi)事件。
onDragEnter, onDragOut, onDragOver, onInvalidDrag是第二類事件，他們細(xì)化了用戶拖動(dòng)對(duì)象的過(guò)程。
onDragEnter(Event e, String|DragDrop[] id)：進(jìn)入drop區(qū)域事件，拖放過(guò)程中首次觸碰到drop區(qū)域時(shí)觸發(fā)。第一個(gè)參數(shù)是mousemove鼠標(biāo)移動(dòng)事件，第二個(gè)參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會(huì)傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會(huì)傳入放下目標(biāo)的拖放對(duì)象數(shù)組。
onDragOut(Event e, String|DragDrop[] id)：離開(kāi)drop區(qū)域事件，拖放過(guò)程中從drop區(qū)域離開(kāi)時(shí)觸發(fā)。第一個(gè)參數(shù)是mousemove鼠標(biāo)移動(dòng)事件，第二個(gè)參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會(huì)傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會(huì)傳入放下目標(biāo)的拖放對(duì)象數(shù)組。
onDragOver(Event e, String|DragDrop[] id)：在drop區(qū)域中拖放移動(dòng)事件，當(dāng)在drop區(qū)域拖放移動(dòng)時(shí)觸發(fā)。第一個(gè)參數(shù)是mousemove鼠標(biāo)移動(dòng)事件，第二個(gè)參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會(huì)傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會(huì)傳入放下目標(biāo)的拖放對(duì)象數(shù)組。
onInvalidDrop(Event e)：不能drop事件，不在drop區(qū)域移動(dòng)時(shí)觸發(fā)，參數(shù)是mousemove鼠標(biāo)移動(dòng)事件。
onMouseDown和onMouseUp是第三類拖放事件函數(shù)，他們用于對(duì)原始鼠標(biāo)事件進(jìn)行提示，而且已經(jīng)融合在前兩類拖放事件函數(shù)中了。
onMouseDown(Event e)：鼠標(biāo)按下事件，參數(shù)是mousedown鼠標(biāo)按下事件。
onMouseUp(Event e)：鼠標(biāo)放開(kāi)事件，參數(shù)是mouseup鼠標(biāo)放開(kāi)事件。
高級(jí)拖放----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>
以上是最基本的實(shí)例，創(chuàng)建了3個(gè)可拖動(dòng)的對(duì)象。
高級(jí)拖放----Handle
根據(jù)以上示例，我們給三個(gè)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
高級(jí)拖放----On Top
1//為OnTop重寫(xiě)監(jiān)聽(tīng)拖放事件的函數(shù)
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});
然后只要?jiǎng)?chuàng)建Ext.ux.DDOnTop的對(duì)象就可以了。
高級(jí)拖放----Proxy
所謂代理(Proxy)，就是拖放時(shí)原div不動(dòng)，跟隨鼠標(biāo)移動(dòng)的是一個(gè)名為Proxy的拖放。如果需要拖動(dòng)的對(duì)象十分復(fù)雜，每次都讓它跟隨鼠標(biāo)移動(dòng)，很可能會(huì)使瀏覽器負(fù)荷過(guò)大，甚至出現(xiàn)頁(yè)面停頓的現(xiàn)象。這時(shí)就需要使用代理來(lái)避免重復(fù)渲染復(fù)雜對(duì)象。
為了使用代理，最簡(jiǎn)單的方法就是把原來(lái)的Ext.dd.DD改成Ext.dd.DDProxy，如：
dd1 = new Ext.dd.DDProxy("dd-demo-1");
這樣就會(huì)出現(xiàn)一個(gè)只有外框的空白Proxy，如果我們希望自定義Proxy的形式，也可以制作，如：
dd3 = new Ext.dd.DDProxy("dd-demo-3","default",{
dragElId : "dd-demo-3-proxy",
resizeFrame : false
});
為了實(shí)現(xiàn)自定義Proxy，我們?cè)趧?chuàng)建DDProxy時(shí)需要設(shè)置3個(gè)參數(shù)。第一個(gè)參數(shù)是對(duì)應(yīng)的div的id；第二個(gè)參數(shù)是拖放的組，只有同組的Drag才能放到同組的Drop上；第三個(gè)參數(shù)是附加參數(shù)。
dragElId的值是我們自定義的proxy，而resizeFrame : false告訴EXT不用使proxy的大小與原div一樣。
為了使proxy與dd-demo-3對(duì)應(yīng)，我們還需要在HTML中加入：
<div id="dd-demo-proxy">proxy-3</div>
高級(jí)拖放----Grid
1dd1 = new Ext.dd.DD("dragDiv1");
2dd1.setXConstraint(1000,1000,25);
3dd1.setYConstraint(1000,1000,25);
注意setXConstraint()和setYConstraint()兩個(gè)方法，其所帶的參數(shù)表示左側(cè)/上側(cè)最遠(yuǎn)距離，右側(cè)/下側(cè)最遠(yuǎn)距離，每次移動(dòng)距離。