使用ExtJS技術實現的拖動樹結點

2019-11-21 00:18:58

字體：大中小

來源：轉載

供稿：網友

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

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

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

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

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

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

在默認情況下，TreePanel規定葉子結點不允許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整合開發Web與移動SNS》 一書的相關章節。

《Android/OPhone開發完全講義》（本書版權已輸出到臺灣）

樣章和目錄下載
 互動網當當網卓越亞馬遜

《人人都玩開心網：Ext JS+Android+SSH整合開發Web與移動SNS》
樣章下載
互動網

樂博Android手機客戶端（新浪微博）發布

上一篇：JS 實現完美include載入實現代碼

下一篇：JavaScript 獲取當前時間戳的代碼

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

使用ExtJS技術實現的拖動樹結點