使用ExtJS技術實現的拖動樹結點
更新時間：2010年08月05日 13:24:32 作者：
在本文將介紹TreePanel組件非常有意思的一個功能：結點拖放。要使TreePanel組件的結點可以拖放非常簡單，只需要將TreePanel類的enableDD選項參數設為true即可。當然，要想實現更復雜的功能，還需要配合其他的參數和事件。
一、結點拖放的位置
拖放結點包含了兩個動作，拖（drag）和放（drop）。拖很好理解，就是將結點拖起來，拖哪一個結點的效果都是一樣的。不過放結點就比較復雜了。放結點可分為如下兩種情況：
追加（append）結點：如果將拖動的結點正好放在非葉子結點的上面，TreePanel組件會將這個結點移動到非葉子結點下面作為該結點的子結點。由于TreePanel的限制，葉子結點不能append。
在同一層做上下移動（above和below）： 如果將拖動的結點放在葉子結點上，或放在非葉子結點的側面，會將拖動結點作為兄弟結點來放置。
下面的設置將TreePanel組件設為結點可拖動狀態(tài)。
在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/drapdrop.html
當顯示出樹形結點時，按上面的拖動方法來拖動結點，會出現如圖1、圖2和圖3所示的拖動效果。
圖1 【英語】結點將作為【計算機】的子結點
圖2 【英語】結點將作為【計算機】的兄弟結點，并移到【計算機】結點的前面（above拖放
圖3 兩個葉子結點交互位置（below拖放）
二、使葉子結點可以append
在默認情況下，TreePanel規(guī)定葉子結點不允許append。不管這個限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應盡量不修改ExtJS的源代碼。不過有時需要在葉子結點上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來解決。
TreePanel會在內部判斷，如果結點的leaf參數為true，則會允許該結點append。了解了TreePanel禁止結點append的原理，就很容易通過nodedragover事件來解決這個問題。
在nodedragover事件方法中有一個參數，通過該參數值的target屬性可以獲得拖動結點放置的目標結點。并在nodedragover方法中將該結點的leaf屬性值設為false，代碼如下：
tree.on("nodedragover", function(e){
var node = e.target;
if(node.leaf)
node.leaf=false;
return true;
});
在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/leafappend.html
顯示樹形結構后，將某個結點拖動到葉子結點處，然后放下，就會在葉子結點下生成一個子結點，而且葉子結點的圖標會變成非葉子結點的圖標，如圖4所示。
拖放結點包含了兩個動作，拖（drag）和放（drop）。拖很好理解，就是將結點拖起來，拖哪一個結點的效果都是一樣的。不過放結點就比較復雜了。放結點可分為如下兩種情況：
追加（append）結點：如果將拖動的結點正好放在非葉子結點的上面，TreePanel組件會將這個結點移動到非葉子結點下面作為該結點的子結點。由于TreePanel的限制，葉子結點不能append。
在同一層做上下移動（above和below）： 如果將拖動的結點放在葉子結點上，或放在非葉子結點的側面，會將拖動結點作為兄弟結點來放置。
下面的設置將TreePanel組件設為結點可拖動狀態(tài)。
在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/drapdrop.html
當顯示出樹形結點時，按上面的拖動方法來拖動結點，會出現如圖1、圖2和圖3所示的拖動效果。
圖1 【英語】結點將作為【計算機】的子結點
圖2 【英語】結點將作為【計算機】的兄弟結點，并移到【計算機】結點的前面（above拖放
圖3 兩個葉子結點交互位置（below拖放）
二、使葉子結點可以append
在默認情況下，TreePanel規(guī)定葉子結點不允許append。不管這個限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應盡量不修改ExtJS的源代碼。不過有時需要在葉子結點上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來解決。
TreePanel會在內部判斷，如果結點的leaf參數為true，則會允許該結點append。了解了TreePanel禁止結點append的原理，就很容易通過nodedragover事件來解決這個問題。
在nodedragover事件方法中有一個參數，通過該參數值的target屬性可以獲得拖動結點放置的目標結點。并在nodedragover方法中將該結點的leaf屬性值設為false，代碼如下：
復制代碼 代碼如下:
tree.on("nodedragover", function(e){
var node = e.target;
if(node.leaf)
node.leaf=false;
return true;
});
在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/leafappend.html
顯示樹形結構后，將某個結點拖動到葉子結點處，然后放下，就會在葉子結點下生成一個子結點，而且葉子結點的圖標會變成非葉子結點的圖標，如圖4所示。
圖4 使葉子結點可以append
除此之外，樹結點還有其他的拖動方式，內容請見
《人人都玩開心網：Ext JS+Android+SSH整合開發(fā)Web與移動SNS》 一書的相關章節(jié)。
相關文章
用extjs實現的集成fckeditor的代碼。2009-05-05
這篇文章主要介紹了extJS中常用的4種Ajax異步提交方式,需要的朋友可以參考下2014-03-03
基礎實一點,會有好處的,排錯的時候就體現出來了,下面就Ext.Direct做一些排錯筆記與大家一一分享,感興趣的朋友可以參考下哈2013-04-04
昨天剛接觸到Extjs，簡單寫了篇學習筆記，今天繼續(xù)。2008-12-12
上一篇簡單做了一個用ext寫的登陸界面，今天來實現登陸效果，主要是回顧下ext中表單提交方法的使用。2010-08-08
動態(tài)加載grid在ExtJs中如何實現，貌似有很多的朋友都不知道吧，下面有個不錯的示例，希望對大家有所幫助2013-09-09
根據我在論壇上的觀察，xtype用起來的時候疑惑會比較多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我決定闡述一下這個xtype的概念。2010-01-01
只有有了事件，頁面才能真正的“活”起來。Extjs的事件也是經過良好封裝的，對于事件的處理都由Ext.uitl.Observable類提供接口。2010-01-01
使用的是用變量存儲 id 加載新的選卡時 交換 id ，從而限制了打開的選項卡數量，如果不是一定要這個效果，建議不要頻繁的關閉和創(chuàng)建tabpanel，感興趣的朋友可以參考下哈2013-04-04
在本文將介紹TreePanel組件非常有意思的一個功能：結點拖放。要使TreePanel組件的結點可以拖放非常簡單，只需要將TreePanel類的enableDD選項參數設為true即可。當然，要想實現更復雜的功能，還需要配合其他的參數和事件。2010-08-08