7.1. 如此拖拽，簡直就像與生俱來的本能一樣。
你可以拖拽grid裡的行，讓它們按你的模式去排列。
你可以拖拽tree裡的節點，把節點從一個枝干拖向另一個枝干。
grid和tree之間，也可以拖動。
layout的split也是一種拖動，改變佈局的大小。
resize也算是拖動，改變大小。
7.2. 第一﹗亂拖。
一直認為拖動很複雜，可實際上只需要一條語句就可以了。
new Ext.dd.DDProxy('block');
然後看看html裡的部分
<div id="block" style="background: red;"> </div>
如果不做任何標記，我們根本什麼都看不到，所以我給加上了紅色背景顏色。現下你可以亂拖了。
截圖裡的紅條條可以隨便拖，實際看例子吧。lingo-sample/1.1.1/07-01.html，2.0裡用法一樣，lingo-sample/2.0/07-01.html。
7.3. 第二﹗代理proxy和目標target
實際上我們剛才看到了DDProxy可以隨便拖，另外一個DDTarget是不能拖動的，這東西是用來放DDProxy的一個區域。看一看繼承體系圖可能有助於我們的理解。
簡單來說，左邊都是可以隨你的滑鼠拖動的，拖動起來以後，直接把他們扔到右邊那些定義好的區域就好了。proxy是可拖動對象，target是拖動的到達站。
在知道了是與非之後，我們要驗証一下自己的理念了。
proxy是我們要拖來拖去的東西。
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
target告訴用戶，他應該把上邊的proxy放到那裡
var target = new Ext.dd.DDTarget('target', 'dd');
注意到兩者之中相同的dd了嗎？這是個分組標誌，咱們透過這個限制用戶不會像第一節那樣，把proxy亂扔到任何地方。只有相同組名的到達站才能接收它，好比你只能把超市貨架上的商品放進籃子，而不能滿地亂扔一樣。
不過這也僅僅是拖拽而已，沒有任何效果不是很不爽嗎？讓我們加入一些小技巧吧，可以讓拖拽顯得更神奇一些。
proxy.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(proxy.getEl());
srcEl.insertBefore(destEl);
};
這個函數是說，在dragdrop之後，會執行這個函數，然後透過id獲得target，根據proxy.getEl()獲得proxy，然後把proxy添加到target的前頭，看起來是放在裡邊了。
好，腳本都組織好了，打開頁面看看效果吧。
當然，為了讓畫面花花綠綠的，咱們加了不少css樣式，稍微給你們看一下吧，省得那些不願意交錢的人說咱們的截圖是用photoshop畫的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>dd</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">
HR {
clear: both;
visibility: hidden
}
.block {
border: 1px red solid;
margin: 10px;
min-height: 80px;
}
.item {
border: 1px green solid;
background: green;
float: left;
margin:10px;
width: 50px;
min-height: 50px;
text-align: center;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
proxy.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(proxy.getEl());
srcEl.insertBefore(destEl);
};
var target = new Ext.dd.DDTarget('target', 'dd');
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="proxy" class="item">item</div>
<hr />
<div id="target" class="block">
<hr />
</div>
</body>
</html>
好了，其實你也可以在lingo-sample/1.1.1/07-02.html看到咱們的例子。很高興的是，lingo-sample/2.0/07-02.html跟它完全一樣。
7.4. 再拖﹗再拖拖。
還有JsonView啦，DataView什麼的，都可以拖，但渲染的時候更見方便，這些等於是Template和Store的一種結合體制。
