使用ExtJS技術實現(xiàn)的拖動樹結點
更新時間：2010年08月05日 13:24:32 作者：
在本文將介紹TreePanel組件非常有意思的一個功能：結點拖放。要使TreePanel組件的結點可以拖放非常簡單，只需要將TreePanel類的enableDD選項參數(shù)設為true即可。當然，要想實現(xiàn)更復雜的功能，還需要配合其他的參數(shù)和事件。
一、結點拖放的位置
拖放結點包含了兩個動作，拖（drag）和放（drop）。拖很好理解，就是將結點拖起來，拖哪一個結點的效果都是一樣的。不過放結點就比較復雜了。放結點可分為如下兩種情況：
追加（append）結點：如果將拖動的結點正好放在非葉子結點的上面，TreePanel組件會將這個結點移動到非葉子結點下面作為該結點的子結點。由于TreePanel的限制，葉子結點不能append。
在同一層做上下移動（above和below）： 如果將拖動的結點放在葉子結點上，或放在非葉子結點的側面，會將拖動結點作為兄弟結點來放置。
下面的設置將TreePanel組件設為結點可拖動狀態(tài)。
在瀏覽器地址欄中輸入如下的URL：
http://localhost:8080/netdisk/tree/drapdrop.html
當顯示出樹形結點時，按上面的拖動方法來拖動結點，會出現(xiàn)如圖1、圖2和圖3所示的拖動效果。
圖1 【英語】結點將作為【計算機】的子結點
圖2 【英語】結點將作為【計算機】的兄弟結點，并移到【計算機】結點的前面（above拖放
圖3 兩個葉子結點交互位置（below拖放）
二、使葉子結點可以append
在默認情況下，TreePanel規(guī)定葉子結點不允許append。不管這個限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應盡量不修改ExtJS的源代碼。不過有時需要在葉子結點上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來解決。
TreePanel會在內部判斷，如果結點的leaf參數(shù)為true，則會允許該結點append。了解了TreePanel禁止結點append的原理，就很容易通過nodedragover事件來解決這個問題。
在nodedragover事件方法中有一個參數(shù)，通過該參數(shù)值的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
當顯示出樹形結點時，按上面的拖動方法來拖動結點，會出現(xiàn)如圖1、圖2和圖3所示的拖動效果。
圖1 【英語】結點將作為【計算機】的子結點
圖2 【英語】結點將作為【計算機】的兄弟結點，并移到【計算機】結點的前面（above拖放
圖3 兩個葉子結點交互位置（below拖放）
二、使葉子結點可以append
在默認情況下，TreePanel規(guī)定葉子結點不允許append。不管這個限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應盡量不修改ExtJS的源代碼。不過有時需要在葉子結點上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來解決。
TreePanel會在內部判斷，如果結點的leaf參數(shù)為true，則會允許該結點append。了解了TreePanel禁止結點append的原理，就很容易通過nodedragover事件來解決這個問題。
在nodedragover事件方法中有一個參數(shù)，通過該參數(shù)值的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
除此之外，樹結點還有其他的拖動方式，內容請見
《人人都玩開心網(wǎng)：Ext JS+Android+SSH整合開發(fā)Web與移動SNS》 一書的相關章節(jié)。
相關文章
ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會導致這兩個組件消失不見不報任何錯誤且在其他瀏覽器正常，通過本文你將學會如何解決此問題2013-08-08
這篇文章主要介紹了ExtJS中設置下拉列表框不可編輯的方法,需要的朋友可以參考下2014-05-05
Extjs 繼承Ext.data.Store不起作用原因分析及解決
有關Extjs 繼承Ext.data.Store 不起作用的原因有很多種，接下來與大家分享下，本人遇到的，這個Store寫出來之后 是不會起到作用的，感興趣的朋友可以看下詳細的原因及解決方法2013-04-04
本文開始進入Extjs最核心最優(yōu)秀的部分。2010-01-01
用extjs實現(xiàn)的集成fckeditor的代碼。2009-05-05
有時候我們在新建列表中的一項后需要進入立刻進入詳細信息的編輯頁面，為了使得操作簡便，一般設定自動導向。2010-04-04
這段時間手中項目已經完成，空閑時間較多。開始了學習ExtJs之旅。2010-11-11
昨天剛接觸到Extjs，簡單寫了篇學習筆記，今天繼續(xù)。2008-12-12
Ext修改GridPanel數(shù)據(jù)和字體顏色、css屬性等
這篇文章主要介紹了Ext修改GridPanel數(shù)據(jù)和字體顏色、css屬性等,需要的朋友可以參考下2014-06-06
應用extjs需要在頁面中引入extjs的樣式及extjs庫文件2009-04-04