中国最大的 Web 开发资源网站及技术社区 ，
árbol.htm
<html xmlns: es decir>
<Evista>
<!-Tool Bar_start->
<!-Tool Bar_exempt->
<!-Tool Bar_end->
<estilo>
es decir/: árbol {display: block;}
IE/: TreeItem {Font-Weight: Expression (this.children.length> 1? 'Bold': 'Normal'); Border-top: 2px blanco sólido; pantalla: bloque; margen-izquierda: 20px; Visibilidad: heredar; desbordamiento: oculto; Ancho: 100%}
es decir/: etiqueta {display: inline; cursor: mano}
</style>
</ablo>
<Body Style = Font-Family: Verdana; tamaño de fuente: 12px>
<h3> 可以拖动的 árbol </h3>
<ie: árbol de árbol = thetree>
<ie: treeItem> <ie: etiqueta id = etiqueta1> 1.0 First set </IE: etiqueta>
<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 Más tarde establece </IE: etiqueta>
<IE: TreeItem> <Ie: Label> 2.1 Maments </IE: Label> </IE: TreeItem>
<IE: TreeItem> <Ie: Label> 2.2 Mastodons </IE: Etiqueta>
<IE: TreeItem> <Ie: Label> 2.2.1 Plesiosaures </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: etiqueta> 2.3 stegosaurus </ie: etiqueta> </ie: treeitem>
<IE: TreeItem> <Ie: Label> 2.4 Apatosaurus </IE: Label> </IE: TreeItem>
<ie: treeItem> <ie: etiqueta> 2.5 mamíferos </ie: etiqueta> </ie: treeitem>
<ie: treeItem> <ie: etiqueta> 2.6 tetrapods </ie: etiqueta>
<IE: TreeItem> <Ie: Label> 2.6.1 Anfibios </IE: Label> </IE: TreeItem>
<ie: treeItem> <ie: etiqueta> 2.6.2 ballenas </ie: etiqueta> </ie: treeitem>
<IE: TreeItem> <ie: Label> 2.6.3 Crocodiles </IE: Label> </IE: TreeItem>
<IE: TreeItem> <Ie: Label> 2.6.4 Tortugas marinas </IE: etiqueta> </IE: TreeItem>
</IE: TreeItem>
<IE: TreeItem> <Ie: Label> 2.7 Permian tardío </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: Etiqueta>
<IE: TreeItem> <Ie: Label> 3.1 Mandibular Fenestra </IE: Label> </IE: TreeItem>
<ie: treeItem> <ie: etiqueta> 3.2 Snout puntiagudo </ie: etiqueta> </ie: treeitem>
<IE: TreeItem> <Ie: Etiqueta> 3.3 Implantación de dientes de teocodante </IE: etiqueta> </IE: TreeItem>
<ie: treeItem> <ie: etiqueta> 3.4 tobillo modificado </ie: etiqueta> </ie: treeitem>
</IE: TreeItem>
<IE: TreeItem> <Ie: Label> 4.0 Mesozoic </IE: Etiqueta>
<IE: TreeItem> <Ie: Label> 4.1 Middle Animals </IE: Label> </IE: TreeItem>
</IE: TreeItem>
</IE: Tree>
<script>
// variables para arrastrar/soltar
var dragelement = null;
var dropeLement = null;
var Currover = nulo;
// variables para expandir/colapsar
var flyCount = 5;
var msecs = 5;
var CurrCount = 0;
// conexión del controlador de eventos
thetree.onmousedown = preselect;
thetree.ondragStart = dragStart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = dragend;
thetree.ondrop = dragDrop;
document.Onclick = haga clic;
// Código de arrastrar/soltar
// método llamado cuando comenzamos a arrastrar/soltar
función dragStart () {
var e;
e = window.event.SrCelement;
if (e.tagname! = etiqueta)
devolver falso;
dragelement = E.ParentElement;
}
// llamado como mouse: tenga en cuenta que hay un manejo especial para el código de dragover
// como dragleave no rastrea el toelement/fromelement como lo hace Mouseover/Mouseout
function dragover () {
if (window.event.srcelement.tagname! = treeitem)
devolver;
if (! dragelement.contains (window.event.srcelement)) {
if (Currover) {
Currover.Style.BorderTopColor =;
}
Currover = Window.event.SrCelement;
Window.event.srcelement.style.BorderTopColor = Black;
event.returnValue = false;
}
}
// llamado cuando se termina el arrastre - siempre
función dragend () {
if (Currover) {
Currover.Style.BorderTopColor =;
}
}
// llamado a la caída
function dragDrop () {
if (Currover) {
Currover.Style.BorderTopColor =;
}
t = Currover;
T.ParentElement.insertbefore (Dragelement, t);
}
// Necesitaba seleccionar elementos para que puedan ser arrastrados
// arrastre la caída solo admitido en la selección y las imágenes
function preselect () {
var e;
e = window.event.SrCelement;
if (e.tagname! = etiqueta) {
devolver;
}
r = document.body.createTextrange ();
r.movetoElementText (e);
r.select ();
window.event.cancelBubble = true;
}
// comienzo del código de expansión/colapso
// llamado para manejar el documento Haga clic, comienza a alternar
función click () {
if (window.event.srcelement.tagname! = etiqueta) {
devolver;
}
if (window.event.srcelement.parentelement.children.length> 1) {
togglestate (window.event.srcelement.parentelement);
}
}
// Alterna el estado de expansión/colapso de un elemento - Configuración
función togglestate (e) {
E.OHEIGHT = E.ScrollHeight + 2;
E.Style.Posheight = E.Offsetheight;
if (e.scrollheight> = e.offsetheight) {
crecer (e);
} demás {
encubierta (e);
}
}
// llamado para iniciar el cultivo de un elemento
function growit (e) {
CurrCount = 0;
Window.setTimeOut (Drow ( + E.UniqueID +);, msecs);
}
// llamado para iniciar la reducción de un elemento
función shrinkit (e) {
CurrCount = 0;
Window.setTimeOut (Doshrink ( + E.UniqueID +);, msecs);
}
// bucle interno para cultivar un objeto
función drow (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 (Drow ( + E.UniqueID +);, msecs);
}
demás {
E.Style.Height =;
}
}
// bucle interno para reducir un objeto
función 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);
}
demás {
E.Style.Posheight = LineHeight;
}
}
</script>
</body>
</html>