中国最大的 Web 开发资源网站及技术社区 ，
arbre.htm
<html xmlns: ie>
<adal>
<! - Toolbar_Start ->
<! - Toolbar_exempt ->
<! - Toolbar_end ->
<style>
IE /: Tree {affichage: bloc;}
IE /: TreeItem {Font-Weight: Expression (this.children.length> 1? 'Bold': 'normal'); Border-top: 2px blanc solide; affichage: bloc; marge-gauche: 20px; Visibilité: hériter; débordement: caché; Largeur: 100%}
IE /: Label {affichage: en ligne; curseur: main}
</ style>
</ head>
<Style du corps = Font-Family: Verdana; taille de police: 12px>
<h3> 可以拖动的 arbre </h3>
<ie: arbre id = thetree>
<ie: arbreItem> <ie: label id = label1> 1.0 d'abord set </ ie: label>
<ie: TreeItem> <ie: étiquette> 1.1 Megalosaurus </ ie: label> </ ie: arbreItem>
<ie: arbreItem> <ie: label> 1.2 iguanodon </ ie: label> </ ie: treitem>
<ie: TreeItem> <ie: label> 1.3 Hylaeosaurus </ ie: label> </ ie: treetem>
<ie: TreeItem> <ie: label> 1.4 Tyrannosaurus rex </ ie: label> </ ie: treetem>
</ ie: TreeItem>
<ie: arbreItem> <ie: label> 2.0 set ultérieurement </ ie: étiquette>
<ie: TreeItem> <ie: label> 2.1 mammouths </ ie: label> </ ie: treetem>
<ie: arbreItem> <ie: étiquette> 2.2 Mastodons </ ie: étiquette>
<ie: arbreItem> <ie: étiquette> 2.2.1 plesiosaurs </ ie: étiquette> </ ie: arbreItem>
<ie: TreeItem> <ie: étiquette> 2.2.2 ichthyosaures </ ie: label> </ ie: treitem>
<ie: arbreItem> <ie: label> 2.2.3 dimetrodon </ ie: étiquette> </ ie: arbreItem>
<ie: arbreItem> <ie: label> 2.2.4 sinapsid </ ie: label> </ ie: treitem>
</ ie: TreeItem>
<ie: TreeItem> <ie: label> 2.3 Stegosaurus </ ie: label> </ ie: treetem>
<ie: arbreItem> <ie: label> 2.4 apatosaurus </ ie: label> </ ie: treitem>
<ie: TreeItem> <ie: étiquette> 2.5 mammifères </ ie: étiquette> </ ie: arbreItem>
<ie: TreeItem> <ie: étiquette> 2.6 tétrapodes </ ie: étiquette>
<ie: TreeItem> <ie: étiquette> 2.6.1 Amphibiens </ ie: label> </ ie: treetem>
<ie: TreeItem> <ie: étiquette> 2.6.2 baleines </ ie: étiquette> </ ie: arbreItem>
<ie: TreeItem> <ie: étiquette> 2.6.3 Crocodiles </ ie: étiquette> </ ie: arbreItem>
<ie: TreeItem> <ie: étiquette> 2.6.4 Turtles de mer </ ie: étiquette> </ ie: TreeItem>
</ ie: TreeItem>
<ie: TreeItem> <ie: label> 2.7 Permian tardif </ ie: label> </ ie: treitem>
<ie: TreeItem> <ie: label> 2.8 mésozoïque </ ie: étiquette> </ ie: arbreItem>
</ ie: TreeItem>
<ie: arbreItem> <ie: label> 3.0 Archosaurs </ ie: label>
<ie: TreeItem> <ie: label> 3.1 mandibular fenestra </ ie: label> </ ie: treetem>
<ie: TreeItem> <ie: étiquette> 3.2 Mnout pointu </ ie: label> </ ie: treetem>
<ie: arbreItem> <ie: étiquette> 3.3 Implantation dentaire du théocodant </ ie: étiquette> </ ie: arbreItem>
<ie: arbreItem> <ie: label> 3.4 Ankle modifié </ ie: étiquette> </ ie: arbreItem>
</ ie: TreeItem>
<ie: TreeItem> <ie: étiquette> 4.0 Mesozoïque </ ie: étiquette>
<ie: TreeItem> <ie: label> 4.1 Animaux du milieu </ ie: étiquette> </ ie: TreeItem>
</ ie: TreeItem>
</ ie: arbre>
<cript>
// Variables pour glisser / dépôt
var draglement = null;
var droptelement = null;
var currover = null;
// Variables pour l'expansion / s'effondrer
var flyCount = 5;
var msecs = 5;
var currCount = 0;
// raccordement du gestionnaire d'événements
thetree.onmousedown = présélect;
theTree.ondRagStart = dragstart;
theTree.ondragend = dragend;
theTree.ondrAsenter = dragover;
theTree.ondRagover = dragover;
theTree.ondragend = dragend;
theTree.ondrop = dragdrop;
document.OnClick = cliquez;
// Faire glisser / déposer le code
// Méthode appelée comme nous commençons à glisser / déposer
fonction dragstart () {
var e;
e = window.event.srcelement;
if (e.tagname! = label)
retourne false;
Drafeuillage = E.Pare-ParentElement;
}
// appelé comme nous souris - Notez qu'il y a une manipulation spéciale pour le code dragover
// Comme DragLeave ne suit pas le Toelement / FromElement comme le fait MouseOver / Mouseout
fonction dragover () {
if (window.event.srcelement.tagname! = TreeItem)
retour;
if (! DragElement.Contains (window.event.srcelement)) {
if (Currover) {
currover.style.bordertopcolor =;
}
currover = window.event.srcelement;
window.event.srcelement.style.bordertopcolor = noir;
event.ReturnValue = false;
}
}
// appelé lorsque la traînée est terminée - toujours
fonction dragenD () {
if (Currover) {
currover.style.bordertopcolor =;
}
}
// appelé Drop
fonction dragdrop () {
if (Currover) {
currover.style.bordertopcolor =;
}
t = Currover;
t.parerentelement.insertbefore (draglement, t);
}
// nécessaire pour sélectionner des éléments afin qu'ils puissent être traînés
// glisser la chute unique uniquement sur la sélection et les images
fonction préselect () {
var e;
e = window.event.srcelement;
if (e.tagname! = label) {
retour;
}
r = document.body.createExtrange ();
R.movetoelementText (E);
R.Select ();
window.event.cancelbubble = true;
}
// Début du code d'extension / effondrement
// appelé pour gérer le document Click, commence à basculer
fonction click () {
if (window.event.srcelement.tagname! = label) {
retour;
}
if (window.event.srcelement.parerentelement.children.length> 1) {
toggleState (window.event.srcelement.parerentelement);
}
}
// bascule l'expansion / effondrer l'état d'un élément - Configuration
fonction togglestate (e) {
e.oheight = e.scrollHeight + 2;
E.Style.posheight = E.offsetheight;
if (e.scrollheight> = e.offsetheight) {
Growit (e);
} autre {
Shrinkit (e);
}
}
// a appelé à initier la croissance d'un élément
fonction Growit (e) {
currCount = 0;
Window.SetTimeout (DOGROW (+ E.UniqueID +);, MSECS);
}
// appelé à initier en rétrécissement d'un élément
fonction rétractable (e) {
currCount = 0;
window.setTimeout (doshrink (+ e.UniqueId +);, msecs);
}
// boucle intérieure pour cultiver un objet
fonction 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;
}
if (currCount <flycount) {
Window.SetTimeout (DOGROW (+ E.UniqueID +);, MSECS);
}
autre {
e.style.height =;
}
}
// boucle intérieure pour réduire un objet
fonction 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);
}
autre {
e.style.posheight = lineheight;
}
}
</cript>
</docy>
</html>