中國最大的web開發資源網站及技術社區，
tree.htm
<HTML XMLNS：IE>
<頭>
<！ - Toolbar_start->
<！ - Toolbar_exempt->
<！ - Toolbar_end->
<樣式>
ie/：tree {display：block;}
ie/：treeItem {font-jight：expression（this.children.length> 1？'bold'：'normal'）;邊界頂：2PX固體白色；顯示：塊；左鍵：20px;可見性：繼承；溢出：隱藏；寬度：100％}
ie/：label {display：inline;光標：手}
</style>
</head>
<身體樣式=字體家庭：verdana;字體大小：12px>
<h3>可以拖動的樹</h3>
<ie：樹ID = thetree>
在
<ie：treeItem> <ie：label> 1.1 Megalosaurus </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 1.2 iguanodon </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 1.3 Hylaeosaurus </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 1.4霸王龍</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeItem> <ie：label> 2.0後來設置</ie：label>
<ie：treeTem> <ie：label> 2.1猛mm象</ie：label> </ie：treeItem>
<ie：treeTem> <ie：label> 2.2 mastodons </ie：label>
<ie：treeItem> <ie：label> 2.2.1 plesiosaurs </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.2.2 ichthyosaurs </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.2.3 dimetrodon </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.2.4 sinapsid </ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeItem> <ie：label> 2.3 Stegosaurus </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.4 apatosaurus </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.5哺乳動物</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6 tetrapods </ie：label>
<ie：treeItem> <ie：label> 2.6.1兩棲動物</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.2鯨魚</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.3鱷魚</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.4海龜</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeItem> <ie：label> 2.7晚二疊紀</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.8中生代</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeTem> <ie：label> 3.0 Archosaurs </ie：label>
<ie：treeItem> <ie：label> 3.1下頜fenestra </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 3.2指向鼻子</ie：label> </ie：treeitem>
在
<ie：treeItem> <ie：label> 3.4修改腳踝</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeTem> <ie：label> 4.0中生代</ie：label>
<ie：treeItem> <ie：label> 4.1中間動物</ie：label> </ie：treeitem>
</ie：treeItem>
</ie：樹>
<script>
//拖放/滴的變量
var dragelement = null;
var dropelement = null;
var currover = null;
//用於擴展/崩潰的變量
var flycount = 5;
var msecs = 5;
var currcount = 0;
//活動處理程序連接
thetree.onmousedown = preselect;
thetree.ondragstart = dragstart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = dragend;
thetree.ondrop = dragdrop;
document.onclick =單擊;
//拖動/刪除代碼
//我們開始拖動/掉落時調用方法
函數dragstart（）{
var e;
e = window.event.srcelement;
如果（e.tagname！=標籤）
返回false;
拖曳= e.parentelement;
}
//鼠標鼠標鼠標 - 請注意，拖動代碼有特殊處理
//因為dragleave不會像鼠標/鼠標一樣跟踪tO element/fromlement
函數dragover（）{
if（window.event.srcelement.tagname！= treeItem）
返回;
if（！dragelement.contains（window.event.srcelement））{
if（currover）{
currover.style.bordertopcolor =;
}
currover = window.event.srcelement;
window.event.srcelement.Style.BorderTopColor = black;
event.returnvalue = false;
}
}
//當阻力結束時打電話 - 總是
函數dragend（）{
if（currover）{
currover.style.bordertopcolor =;
}
}
//呼叫下降
功能dragdrop（）{
if（currover）{
currover.style.bordertopcolor =;
}
t = currover;
t.parentelement.insertbefore（dragelement，t）;
}
//選擇項目需要拖動
//僅在選擇和圖像上支撐的阻力滴
函數preselect（）{
var e;
e = window.event.srcelement;
if（e.tagname！= label）{
返回;
}
r = document.body.createtExtrange（）;
R.MovetoElementText（E）;
r.Select（）;
window.event.cancelBubble = true;
}
//擴展/崩潰代碼的開始
//打電話來處理文檔單擊，開始切換
函數單擊（）{
if（window.event.srcelement.tagname！= label）{
返回;
}
if（window.event.srcelement.parentelement.children.length> 1）{
togglestate（window.event.srcelement.parentelement）;
}
}
//切換元素的擴展/倒塌狀態 - 確實設置了
函數togglestate（e）{
e.oheight = e.scrollheight + 2;
e.Style.posheight = e.offseight;
if（e.scrollheight> = e.offsetheight）{
growit（e）;
} 別的 {
收縮（E）;
}
}
//呼籲啟動成長元素
功能growit（e）{
currcount = 0;
window.setTimeOut（doGrow（ + e.uniqueId +）;，msecs）;
}
//打電話開始收縮元素
功能收縮（E）{
currcount = 0;
window.setTimeOut（doshrink（ + e.uniqueId +）;，msecs）;
}
//內部循環生長一個物體
功能dogrow（e）{
var dh;
var lineHeight = E.Children [0] .offsetheight;
Currcount ++;
dh = e.oheight / flycount;
if（e.style.posheight！= e.oheight）{
E.Style.posheight += DH;
}
如果（Currcount <flyCount）{
window.setTimeOut（doGrow（ + e.uniqueId +）;，msecs）;
}
別的 {
e.Style.Height =;
}
}
//縮小對象的內部循環
功能doshrink（e）{
var dh，dw;
var lineHeight = E.Children [0] .offsetheight;
var p;
Currcount ++;
dh =（e.oheight -lineHeight） / flyCount;
e.Style.posheight- = DH;
如果（Currcount <flyCount）{
window.setTimeOut（doshrink（ + e.uniqueId +）;，msecs）;
}
別的 {
e.Style.posheight = lineHeight;
}
}
</script>
</body>
</html>