中国最大的 web 开发资源网站及技术社区 ，
Tree.htm
<html xmlns: IE>
<head>
<!-toolbar_start->
<!-toolbar_exempt->
<!-toolbar_end->
<tyle>
IE/: Tree {display: block;}
IE/: TreeItem {Font-Weight: Expression (this.children.length> 1? 'Bold': 'Normal'); Border-top: 2px solid white; display: block; margin-kiri: 20px; Visibilitas: warisan; meluap: tersembunyi; Lebar: 100%}
IE/: Label {display: inline; kursor: tangan}
</tyle>
</head>
<gaya tubuh = font-family: verdana; Ukuran font: 12px>
<h3> 可以拖动的 pohon </h3>
<ie: ID pohon = thetree>
<IE: TreeItem> <ie: Label ID = Label1> 1.0 Set Pertama </ 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 Nantinya Set </ ie: Label>
<ie: TreeItem> <ie: label> 2.1 mammoths </ ie: label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.2 mastodon </ 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 mamalia </ ie: label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.6 Tetrapods </ ie: Label>
<ie: TreeItem> <ie: Label> 2.6.1 Amfibi </ ie: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.6.2 Paus </ ie: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.6.3 Buaya </ ie: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.6.4 Turtles Laut </ie: Label> </ ie: TreeItem>
</ ie: TreeItem>
<ie: TreeItem> <ie: Label> 2.7 Permian terlambat </ ie: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: label> 2.8 mesozoikum </ ie: label> </ ie: TreeItem>
</ ie: TreeItem>
<ie: TreeItem> <ie: Label> 3.0 Archosaurs </ ie: Label>
<ie: TreeItem> <ie: label> 3.1 fenestra mandibula </ ie: label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 3.2 SNOUT PENGEMBALIAN </ iE: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 3.3 Implantasi Gigi THEOKODAN </ iE: Label> </ ie: TreeItem>
<ie: TreeItem> <ie: Label> 3.4 Modified Ankle </ie: Label> </ ie: TreeItem>
</ ie: TreeItem>
<ie: TreeItem> <ie: Label> 4.0 mesozoikum </ ie: label>
<ie: TreeItem> <ie: Label> 4.1 Hewan Tengah </ ie: Label> </ ie: TreeItem>
</ ie: TreeItem>
</ie: Tree>
<script>
// Variabel untuk drag/drop
var dragelement = null;
var dropelement = null;
var Currover = null;
// Variabel untuk memperluas/runtuh
var flycount = 5;
var msecs = 5;
var Currcount = 0;
// hookup pawang acara
thetree.onmousedown = preselect;
thetree.ondragStart = dragStart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = dragend;
thetree.ondrop = dragDrop;
document.onClick = klik;
// seret/lepas kode
// metode dipanggil saat kita mulai seret/drop
fungsi dragStart () {
var e;
e = window.event.srcelement;
if (e.tagname! = label)
mengembalikan false;
dragElement = e.parentElement;
}
// menelepon saat kami mouse - perhatikan bahwa ada penanganan khusus untuk kode dragover
// seperti dragleave tidak melacak toelement/fromelement seperti mouseover/mouseout
function dragover () {
if (window.event.srcelement.tagname! = TreeItem)
kembali;
if (! dragelement.contains (window.event.srcelement)) {
if (currover) {
currover.style.bordertopcolor =;
}
Currover = window.event.srcelement;
window.event.srcelement.style.bordertopcolor = hitam;
event.returnValue = false;
}
}
// menelepon saat seret berakhir - selalu
function dragend () {
if (currover) {
currover.style.bordertopcolor =;
}
}
// memanggil drop
function dragDrop () {
if (currover) {
currover.style.bordertopcolor =;
}
t = Currover;
t.parentelement.insertbefore (dragelement, t);
}
// Diperlukan untuk memilih item sehingga dapat diseret
// Drag drop hanya didukung pada seleksi dan gambar
fungsi preselect () {
var e;
e = window.event.srcelement;
if (e.tagname! = label) {
kembali;
}
r = document.body.createTextrange ();
R.MovetoElementText (E);
R.Select ();
window.event.cancelbubble = true;
}
// Awal dari Kode Perluas/Kolap
// menelepon untuk menangani klik dokumen, mulai beralih
fungsi klik () {
if (window.event.srcelement.tagname! = label) {
kembali;
}
if (window.event.srcelement.parentelement.children.length> 1) {
togglestate (window.event.srcelement.parentelement);
}
}
// Mengacak -acak status elemen yang memperluas/runtuh
fungsi togglestate (e) {
E.oheight = e.scrollheight + 2;
E.Style.Posheight = E.OffsetHeight;
if (e.scrollHeight> = e.offsetHeight) {
growit (e);
} kalau tidak {
shrinkit (e);
}
}
// dipanggil untuk memulai menumbuhkan elemen
fungsi growit (e) {
Currcount = 0;
window.setTimeout (Degrow ( + E.UniqueID +) ;, msecs);
}
// dipanggil untuk memulai menyusutnya elemen
fungsi shrinkit (e) {
Currcount = 0;
window.setTimeout (doshrink ( + e.uniqueid +) ;, msecs);
}
// loop dalam untuk menumbuhkan objek
Fungsi Dobrow (e) {
var dh;
var lineHeight = e.Children [0] .OffsetHeight;
Currcount ++;
dh = e.oheight / flycount;
if (e.style.posheight! = e.oheight) {
E.Style.posheight += dh;
}
if (Currcount <flycount) {
window.setTimeout (Degrow ( + E.UniqueID +) ;, msecs);
}
kalau tidak {
E.Style.height =;
}
}
// loop dalam untuk menyusut objek
fungsi doshrink (e) {
Var DH, DW;
var lineHeight = e.Children [0] .OffsetHeight;
var p;
Currcount ++;
dh = (e.oheight - lineHeight) / flycount;
E.Style.Posheight -= DH;
if (Currcount <flycount) {
window.setTimeout (doshrink ( + e.uniqueid +) ;, msecs);
}
kalau tidak {
E.Style.posheight = lineHeight;
}
}
</script>
</body>
</html>