快捷導(dǎo)航

使用ExtJS技術(shù)實現(xiàn)的拖動樹結(jié)點

更新時間：2010年08月05日 13:24:32 作者：

在本文將介紹TreePanel組件非常有意思的一個功能：結(jié)點拖放。要使TreePanel組件的結(jié)點可以拖放非常簡單，只需要將TreePanel類的enableDD選項參數(shù)設(shè)為true即可。當(dāng)然，要想實現(xiàn)更復(fù)雜的功能，還需要配合其他的參數(shù)和事件。

一、結(jié)點拖放的位置
拖放結(jié)點包含了兩個動作，拖（drag）和放（drop）。拖很好理解，就是將結(jié)點拖起來，拖哪一個結(jié)點的效果都是一樣的。不過放結(jié)點就比較復(fù)雜了。放結(jié)點可分為如下兩種情況：

追加（append）結(jié)點：如果將拖動的結(jié)點正好放在非葉子結(jié)點的上面，TreePanel組件會將這個結(jié)點移動到非葉子結(jié)點下面作為該結(jié)點的子結(jié)點。由于TreePanel的限制，葉子結(jié)點不能append。
在同一層做上下移動（above和below）：如果將拖動的結(jié)點放在葉子結(jié)點上，或放在非葉子結(jié)點的側(cè)面，會將拖動結(jié)點作為兄弟結(jié)點來放置。
下面的設(shè)置將TreePanel組件設(shè)為結(jié)點可拖動狀態(tài)。

在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/drapdrop.html
當(dāng)顯示出樹形結(jié)點時，按上面的拖動方法來拖動結(jié)點，會出現(xiàn)如圖1、圖2和圖3所示的拖動效果。

圖1 【英語】結(jié)點將作為【計算機】的子結(jié)點

圖2 【英語】結(jié)點將作為【計算機】的兄弟結(jié)點，并移到【計算機】結(jié)點的前面（above拖放

圖3 兩個葉子結(jié)點交互位置（below拖放）
二、使葉子結(jié)點可以append

在默認(rèn)情況下，TreePanel規(guī)定葉子結(jié)點不允許append。不管這個限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應(yīng)盡量不修改ExtJS的源代碼。不過有時需要在葉子結(jié)點上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來解決。
TreePanel會在內(nèi)部判斷，如果結(jié)點的leaf參數(shù)為true，則會允許該結(jié)點append。了解了TreePanel禁止結(jié)點append的原理，就很容易通過nodedragover事件來解決這個問題。
在nodedragover事件方法中有一個參數(shù)，通過該參數(shù)值的target屬性可以獲得拖動結(jié)點放置的目標(biāo)結(jié)點。并在nodedragover方法中將該結(jié)點的leaf屬性值設(shè)為false，代碼如下：

復(fù)制代碼代碼如下:

 
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
顯示樹形結(jié)構(gòu)后，將某個結(jié)點拖動到葉子結(jié)點處，然后放下，就會在葉子結(jié)點下生成一個子結(jié)點，而且葉子結(jié)點的圖標(biāo)會變成非葉子結(jié)點的圖標(biāo)，如圖4所示。

圖4 使葉子結(jié)點可以append

除此之外，樹結(jié)點還有其他的拖動方式，內(nèi)容請見
《人人都玩開心網(wǎng)：Ext JS+Android+SSH整合開發(fā)Web與移動SNS》 一書的相關(guān)章節(jié)。