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

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

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

        圖1  【英語(yǔ)】結(jié)點(diǎn)將作為【計(jì)算機(jī)】的子結(jié)點(diǎn)

圖2  【英語(yǔ)】結(jié)點(diǎn)將作為【計(jì)算機(jī)】的兄弟結(jié)點(diǎn)，并移到【計(jì)算機(jī)】結(jié)點(diǎn)的前面（above拖放

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

在默認(rèn)情況下，TreePanel規(guī)定葉子結(jié)點(diǎn)不允許append。不管這個(gè)限制合理還是不合理，為了保持ExtJS版本的兼容性，讀者應(yīng)盡量不修改ExtJS的源代碼。不過有時(shí)需要在葉子結(jié)點(diǎn)上append。那么在這種情況下，我們可以通過TreePanel的nodedragover事件來(lái)解決。
TreePanel會(huì)在內(nèi)部判斷，如果結(jié)點(diǎn)的leaf參數(shù)為true，則會(huì)允許該結(jié)點(diǎn)append。了解了TreePanel禁止結(jié)點(diǎn)append的原理，就很容易通過nodedragover事件來(lái)解決這個(gè)問題。
在nodedragover事件方法中有一個(gè)參數(shù)，通過該參數(shù)值的target屬性可以獲得拖動(dòng)結(jié)點(diǎn)放置的目標(biāo)結(jié)點(diǎn)。并在nodedragover方法中將該結(jié)點(diǎn)的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)后，將某個(gè)結(jié)點(diǎn)拖動(dòng)到葉子結(jié)點(diǎn)處，然后放下，就會(huì)在葉子結(jié)點(diǎn)下生成一個(gè)子結(jié)點(diǎn)，而且葉子結(jié)點(diǎn)的圖標(biāo)會(huì)變成非葉子結(jié)點(diǎn)的圖標(biāo)，如圖4所示。

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

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

 

 

《Android/OPhone開發(fā)完全講義》（本書版權(quán)已輸出到臺(tái)灣）

 樣章和目錄下載
 互動(dòng)網(wǎng)  當(dāng)當(dāng)網(wǎng)  卓越亞馬遜

《人人都玩開心網(wǎng)：Ext JS+Android+SSH整合開發(fā)Web與移動(dòng)SNS》
 樣章下載
 互動(dòng)網(wǎng)

 樂博Android手機(jī)客戶端（新浪微博）發(fā)布

最新評(píng)論