中国最大的 Web 开发资源网站及技术社区 ，
árvore.htm
<html xmlns: ie>
<head>
<!-Toolbar_start->
<!-Toolbar_exemp->
<!-Toolbar_end->
<estilo>
ou seja, árvore {Display: Block;}
ou seja, TreeItem {Fonte-peso: expressão (this.children.length> 1? 'Bold': 'Normal'); Top de borda: 2px branco sólido; exibição: bloco; margem-esquerda: 20px; Visibilidade: herdar; estouro: oculto; Largura: 100%}
ou seja, etiqueta {display: inline; Cursor: Hand}
</style>
</head>
<estilo de corpo = font-família: verdana; Size da fonte: 12px>
<H3> 可以拖动的 Árvore </h3>
<ie: árvore id = theTree>
<ie: árvore> <ie: rótulo id = rótulo1> 1.0 primeiro conjunto </ie: etiqueta>
<ie: árvore> <ie: etiqueta> 1,1 megalosaurus </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 1.2 iguanodon </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 1.3 hylaeosaurus </ie: etiqueta> </ie: Treeitem>
<ie: Treeitem> <ie: etiqueta> 1.4 Tyrannosaurus rex </ie: Label> </ie: Treeitem>
</ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.0 Conjunto posterior </ie: Label>
<ie: árvore> <ie: etiqueta> 2.1 mamutes </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.2 Mastodons </ie: Label>
<ie: árvore> <ie: etiqueta> 2.2.1 plesiosaurs </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.2.2 Ichthyosaurs </ie: etiqueta> </ie: Treeitem>
<ie: Treeitem> <ie: etiqueta> 2.2.3 Dimetrodon </ie: Label> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.2.4 sinapsid </ie: etiqueta> </ie: Treeitem>
</ie: Treeitem>
<ie: Treeitem> <ie: etiqueta> 2.3 Stegosaurus </ie: Label> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.4 Apatosaurus </ie: Label> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.5 mamíferos </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.6 tetrapods </ie: Label>
<ie: árvore> <ie: etiqueta> 2.6.1 anfíbios </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.6.2 baleias </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.6.3 crocodilos </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.6.4 Tartarugas marinhas </ie: etiqueta> </ie: Treeitem>
</ie: Treeitem>
<ie: Treeitem> <ie: etiqueta> 2.7 Permiano tardio </ie: Label> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 2.8 mesozóico </ie: etiqueta> </ie: Treeitem>
</ie: Treeitem>
<ie: Treeitem> <ie: rótulo> 3.0 ArchosAurs </ie: Label>
<ie: Treeitem> <ie: etiqueta> 3.1 fEnestra mandibular </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 3.2 focinho pontual </ie: etiqueta> </ie: Treeitem>
<isto é: árvore> <ie: etiqueta> 3.3 Implante de dente tecodente </ie: etiqueta> </ie: Treeitem>
<ie: árvore> <ie: etiqueta> 3.4 tornozelo modificado </ie: etiqueta> </ie: Treeitem>
</ie: Treeitem>
<ie: Treeitem> <ie: etiqueta> 4.0 mesozóico </ie: Label>
<ie: árvore> <ie: etiqueta> 4.1 animais do meio </ie: etiqueta> </e: Treeitem>
</ie: Treeitem>
</ie: árvore>
<Cript>
// variáveis para arrastar/soltar
var dragElement = null;
var gotelement = null;
var curverver = nulo;
// variáveis para expandir/colapso
var flyCount = 5;
var msecs = 5;
var curcount = 0;
// conexão de manipulador de eventos
theTree.onMouseDown = pré -selecionado;
thetree.ondragstart = dragstart;
theTree.ondRagend = dragnd;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
theTree.ondRagend = dragnd;
thetree.ondrop = dragdrop;
document.OnClick = clique;
// Código de arrastar/soltar
// Método chamado quando começamos a arrastar/soltar
função dragstart () {
var e;
e = window.event.srcelement;
if (e.TagName! = Label)
retornar falso;
dragElement = e.parenteLement;
}
// chamado enquanto nós o mouse - Observe que há um manuseio especial para o código de dragover
// como o dragleave não rastreia o toelement/fromElement, como o mouseover/mouseout
função dragover () {
if (window.event.srcelement.tagname! = TreeItem)
retornar;
if (! dragElement.contains (window.event.srcelement)) {
if (currrover) {
currover.style.bordertopcolor =;
}
currver = window.event.srcelement;
window.event.srcelement.style.bordertopcolor = preto;
event.returnValue = false;
}
}
// chamado quando o arrasto termina - sempre
função dragend () {
if (currrover) {
currover.style.bordertopcolor =;
}
}
// chamado em gota
função dragdrop () {
if (currrover) {
currover.style.bordertopcolor =;
}
t = currver;
t.ParenteLement.InsertBefore (dragElement, t);
}
// precisava selecionar itens para que eles possam ser arrastados
// Draw Drop Somente suportado na seleção e imagens
função Preselect () {
var e;
e = window.event.srcelement;
if (e.TagName! = Label) {
retornar;
}
r = document.body.createTexTrange ();
R.MoveToElementText (e);
R.Select ();
window.Event.cancelbubble = true;
}
// Início do código de expansão/colapso
// chamado para lidar com o clique do documento, começa a alternar
função click () {
if (window.event.srcelement.tagname! = Label) {
retornar;
}
if (window.event.srcelement.parentelement.children.length> 1) {
togglestate (window.event.srcelement.parenteLement);
}
}
// alterna o estado de expansão/colapso de um elemento - configura
função togglestate (e) {
E.OHeight = E.ScrolHeight + 2;
e.style.PosHeight = E.OffSethEight;
if (e.crolHeight> = e.offSethEight) {
Growit (e);
} outro {
encolher (e);
}
}
// chamado para iniciar o crescimento de um elemento
Função Growit (e) {
currCount = 0;
window.setTimeout (Dogrow ( + e.uniqueId +);, ms);
}
// chamado para iniciar o encolhimento de um elemento
função encolhido (e) {
currCount = 0;
window.setTimeout (Doshrink ( + e.uniqueId +);, msecs);
}
// loop interno para cultivar um objeto
função 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 +);, ms);
}
outro {
e.style.Height =;
}
}
// loop interno para encolher um objeto
função 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);
}
outro {
e.style.PosHeight = LineHeight;
}
}
</script>
</body>
</html>