中国最大的ウェブ开发资源网站及技术社区、
tree.htm
<html xmlns：ie>
<head>
<！ - toolbar_start->
<！ - toolbar_exempt->
<！ - toolbar_end->
<style>
ie/：tree {display：block;}
ie/：treeitem {font-weight：expression（this.children.length> 1？ 'bold'： 'normal'）;ボーダートップ：2pxソリッドホワイト;ディスプレイ：ブロック;マージン左：20px;可視性：継承;オーバーフロー：隠し;幅：100％}
ie/：label {display：inline;カーソル：手}
</style>
</head>
<body style = font-family：Verdana;フォントサイズ：12px>
<h3>可以拖动的ツリー</h3>
<ie：tree id = thetree>
<ie：treeitem> <ie：label id = label1> 1.0 first set </ie：label>
<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 tyrannosaurus rex </ie：label> </ie：treeitem>
</ie：treeitem>
<ie：treeitem> <ie：label> 2.0後のセット</ie：label>
<ie：treeitem> <ie：label> 2.1 mammoths </ie：label> </ie：treeitem>
<ie：treeitem> <ie：label> 2.2マストドン</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 crocodiles </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 mesozoic </ie：label> </ie：treeitem>
</ie：treeitem>
<ie：treeitem> <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.3 Theocodant歯移植</ie：label> </ie：treeitem>
<ie：treeitem> <ie：label> 3.4修正された足首</ie：label> </ie：treeitem>
</ie：treeitem>
<ie：treeitem> <ie：label> 4.0 mesozoic </ie：label>
<ie：treeitem> <ie：label> 4.1中動物</ie：label> </ie：treeitem>
</ie：treeitem>
</ie：tree>
<スクリプト>
//ドラッグ/ドロップの変数
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.ondAgenter = dragover;
theTree.ondragover = dragover;
theTree.ondragend = dragend;
theTree.ondrop = dragdrop;
document.onclick = click;
//コードをドラッグ/ドロップします
//ドラッグ/ドロップを開始するときに呼び出されます
関数dragstart（）{
var e;
e = window.event.srcelement;
if（e.tagname！= label）
falseを返します。
dragelement = e.parentelement;
}
//マウスオーバーとして呼び出されます - ドラッグオーバーコードのための特別な取り扱いがあることに注意してください
//ドラッグリーブは、マウスオーバー/マウスアウトが行うように、Toelement/forelementを追跡しないため
function 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 =カロバー;
t.parentelement.insertbefore（dragelement、t）;
}
//アイテムがドラッグできるようにアイテムを選択する必要があります
//選択と画像でのみサポートされているドラッグドロップ
function preselect（）{
var e;
e = window.event.srcelement;
if（e.tagname！= label）{
戻る;
}
r = document.body.createTextrange（）;
R.MovetoElementText（e）;
R.Select（）;
window.event.cancelbubble = true;
}
//展開/崩壊コードの開始
//ドキュメントクリックを処理するために呼び出され、切り替えを開始します
関数click（）{
if（window.event.srcelement.tagname！= label）{
戻る;
}
if（window.event.srcelement.parentelement.children.length> 1）{
glestate（window.event.srcelement.parentelement）;
}
}
//要素の拡張/崩壊状態を切り替える - セットアップを行います
関数togglestate（e）{
e.oheight = e.scrollheight + 2;
e.Style.posheight = e.offseTheight;
if（e.scrollheight> = e.offsetheight）{
growit（e）;
} それ以外 {
Shrinkit（e）;
}
}
//要素の成長を開始するために呼び出されました
関数growit（e）{
CurrCount = 0;
window.settimeout（dogrow（ + e.uniqueid +）;、msecs）;
}
//要素の縮小を開始するように呼び出されました
関数Shrinkit（e）{
CurrCount = 0;
window.settimeout（doshrink（ + e.uniqueid +）;、msecs）;
}
//オブジェクトを栽培するための内部ループ
関数dogrow（e）{
var dh;
var lineheight = e.children [0] .offseetheight;
Currcount ++;
dh = e.oheight / flycount;
if（e.style.posheight！= e.oheight）{
e.style.posheight += dh;
}
if（currcount <flycount）{
window.settimeout（dogrow（ + e.uniqueid +）;、msecs）;
}
それ以外 {
e.style.height =;
}
}
//オブジェクトを縮小するための内部ループ
関数doshrink（e）{
var dh、dw;
var lineheight = e.children [0] .offseetheight;
var p;
Currcount ++;
dh =（e.oheight -lineheight） / flycount;
e.Style.posheight- = dh;
if（currcount <flycount）{
window.settimeout（doshrink（ + e.uniqueid +）;、msecs）;
}
それ以外 {
e.style.posheight = lineheight;
}
}
</script>
</body>
</html>