中国最大的 Web 开发资源网站及技术社区 ，
Tree.htm
<html xmlns: IE>
<kopf>
<!-Symbolleiste_start->
<!-Symbolleiste_exempt->
<!-Symbolleiste->
<Styles>
IE/: Baum {Anzeige: Block;}
IE/: TreeItem {Schriftgewicht: Ausdruck (this.children.length> 1? 'BOLD': 'Normal'); Border-Top: 2px Feste Weiß; Anzeige: Block; Rand-Links: 20px; Sichtbarkeit: Erbe; Überlauf: versteckt; Breite: 100%}
dh/: label {display: inline; Cursor: Hand}
</style>
</head>
<Body Style = Schriftfamilie: Verdana; Schriftgröße: 12px>
<h3> 可以拖动的 Baum </h3>
<ie: baum id = thetree>
<IE: TreeItem> <IE: Label ID = Label1> 1.0 Erster Satz </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: treEtem> <IE: Label> 2.0 später set </ie: label>
<IE: TreeItem> <IE: Label> 2.1 Mammuts </ie: label> </ie: treeItem>
<Ie: treEtem> <IE: Label> 2.2 Mastodons </ie: label>
<IE: TreeItem> <IE: Label> 2.2.1 Plesiosaurier </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Label> 2.2.2 Ichthyosaurs </ie: label> </ie: treEtem>
<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 Säugetiere </IE: Label> </ie: treeItem>
<IE: TreeItem> <IE: Etikett> 2.6 Tetrapods </ie: label>
<IE: TreeItem> <IE: Label> 2.6.1 Amphibien </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Etikett> 2.6.2 Wale </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Etikett> 2.6.3 Krokodile </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Label> 2.6.4 Meeresschildkröten </ie: label> </ie: treeItem>
</ie: treeItem>
<IE: TreeItem> <IE: Label> 2.7 Spätpermian </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Label> 2.8 Mesozoic </ie: label> </ie: treeItem>
</ie: treeItem>
<Ie: TreeItem> <IE: Label> 3.0 Archosaurier </ie: label>
<IE: TreeItem> <IE: Etikett> 3.1 Unterkiefer Fenestra </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Label> 3.2 Speced Snout </ie: Label> </ie: treeItem>
<IE: TreeItem> <IE: Etikett> 3.3 Theocodant Tooth Implantation </ie: label> </ie: treeItem>
<IE: TreeItem> <IE: Etikett> 3.4 Modifizierter Knöchel </ie: label> </ie: treeItem>
</ie: treeItem>
<IE: TreeItem> <IE: Label> 4.0 Mesozoic </ie: label>
<IE: TreeItem> <IE: Label> 4.1 Middle Animals </ie: label> </ie: treeItem>
</ie: treeItem>
</ie: Baum>
<Script>
// Variablen für Drag/Drop
var dragelement = null;
var Dropelement = null;
var currover = null;
// Variablen zum Erweitern/Zusammenbruch
var flycount = 5;
var mscs = 5;
var currcount = 0;
// Event -Handler -Anschluss
thetree.onmousedown = preselect;
thetree.ondragstart = dragStart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = Dragover;
thetree.ondragend = dragend;
thetree.ondrop = Dragdrop;
document.onclick = click;
// Code des Drag/Drops
// Methode aufgerufen, während wir den Drag/Drop starten
Funktion dragStart () {
var e;
e = window.event.srcelement;
if (e.tagname! = label)
false zurückgeben;
Dragelement = E. parentelement;
}
// Angerufen, während wir überarbeiten - Beachten Sie, dass es eine spezielle Handhabung für den Dragover -Code gibt
// As Dragleave verfolgt die Toelement/FromElement nicht wie Mausover/Mausout
Funktion dragover () {
if (window.event.srcelement.tagname! = treeItem)
zurückkehren;
if (! Dragelement.contains (window.event.srcelement)) {
if (currover) {
Currover.Style.Bordertopcolor =;
}
currover = window.event.srcelement;
window.event.srcelement.style.Bordertopcolor = schwarz;
Ereignis.ReturnValue = false;
}
}
// aufgerufen, wenn Drag beendet ist - immer
Funktion dragend () {
if (currover) {
Currover.Style.Bordertopcolor =;
}
}
// Drop aufgerufen
Funktion dragdrop () {
if (currover) {
Currover.Style.Bordertopcolor =;
}
T = Currover;
t.Parentelement.insertBefore (Dragelement, T);
}
// musste Elemente auswählen, damit sie gezogen werden können
// DROP Ziehen Sie nur bei Auswahl und Bildern abzutragen
Funktion preselect () {
var e;
e = window.event.srcelement;
if (e.tagname! = label) {
zurückkehren;
}
r = document.body.createTextrange ();
R.MovetoelementText (e);
r.Select ();
window.event.cancelBubble = true;
}
// Beginn des Codes für Erweiterung/Zusammenbruch
// Rufen Sie an, um das Dokumentklick zu verarbeiten, und startet umschalten
Funktion Click () {
if (window.event.srcelement.tagname! = label) {
zurückkehren;
}
if (window.event.srcelement.parentelement.children.length> 1) {{
Togglestate (window.event.srcelement.Parentelement);
}
}
// Umschaltet die Erweiterung/Zusammenbruch eines Elements - macht ein Setup
Funktion Togglestate (e) {
e.oHeight = e.ScrollHeight + 2;
E.Style.poshght = E.offseteight;
if (e.ScrollHeight> = e.offseteight) {
Growit (e);
} anders {
schrumpfen (e);
}
}
// aufgerufen, um ein Element wachsen zu lassen
Funktion Growit (e) {
CurrCount = 0;
window.settimeout (DOWROW ( + E.uniqueId +);, MSECs);
}
// aufgerufen, um das Schrumpfen eines Elements zu initiieren
Funktion schrumpfen (e) {
CurrCount = 0;
window.settimeout (doshrink ( + e.uniqueId +);, mscs);
}
// innere Schleife zum Anbau eines Objekts
Funktionsgrow (e) {
var dh;
var lineHeight = e.Children [0] .offseteight;
CurrCount ++;
dh = e.oHeight / flyCount;
if (e.style.posheigh! = e.oHeight) {
E.Style.posheight += DH;
}
if (currCount <flyCount) {
window.settimeout (DOWROW ( + E.uniqueId +);, MSECs);
}
anders {
E.Style.Height =;
}
}
// innere Schleife zum Verkleinern eines Objekts
Funktion Doshrink (e) {
var dh, dw;
var lineHeight = e.Children [0] .offseteight;
var p;
CurrCount ++;
dh = (e.oHeight - lineHeight) / flyCount;
E.Style.Posheight -= DH;
if (currCount <flyCount) {
window.settimeout (doshrink ( + e.uniqueId +);, mscs);
}
anders {
E.Style.posheight = lineHeight;
}
}
</script>
</body>
</html>