扩展性很强的树形导航菜单

<style>     
  ie\:tree   {display:   block;}     
  ie\:treeitem   {font-weight:   expression(this.children.length   >   1   ?   'bold'   :   'normal');     
  border-top:   2px     
  solid   white;display:   block;   margin-left:   50px;   visibility:   inherit;   overflow:     
  hidden;   width:   100%}     
  ie\:label   {display:   inline;   cursor:   hand}     
  </style>

<h3>可以拖动的tree</h3>     
  <ie:tree   id=TheTree>     
  <ie:treeitem><ie:label   id=Label1>1.0   First   Set</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   Later   Set</ie:label>     
  <ie:treeitem><ie:label>2.1   Mammoths</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>2.2   Mastodons</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   Mammals</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>2.6   Tetrapods</ie:label>sdfsdf     
  <ie:treeitem><ie:label><a href="http://www.m.com" target="_blank">2.6.1   Amphibians</a></ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>2.6.2   Whales</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>2.6.3   Crocodiles</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>2.6.4   Sea   Turtles</ie:label></ie:treeitem>     
  </ie:treeitem>     
  <ie:treeitem><ie:label>2.7   Late   Permian</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:label>     
  <ie:treeitem><ie:label>3.1   Mandibular   fenestra</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>3.2   Pointed   Snout</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>3.3   Theocodant   Tooth   Implantation</ie:label></ie:treeitem>     
  <ie:treeitem><ie:label>3.4   Modified   Ankle</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:label>4.1.1   add</ie:label>   
  <ie:treeitem><ie:label>4.1.1.1   add</ie:label></ie:treeitem>   
  <ie:treeitem><ie:label>4.1.1.2   add</ie:label>   
  </ie:treeitem>     
  </ie:treeitem>     
  </ie:treeitem>     
  </ie:tree>     
  <script>     
  //   variables   for   drag/drop     
  var   dragElement   =   null;     
  var   dropElement   =   null;     
  var   currOver   =   null;     
    
  //   variables   for   expanding/collapsing     
  var   flyCount   =   5;     
  var   msecs   =   5;     
  var   currCount   =   0;     
    
  //   event   handler   hookup     
  TheTree.onmousedown   =   preselect;     
  TheTree.ondragstart   =   dragstart;     
  TheTree.ondragend   =   dragend;     
  TheTree.ondragenter   =   dragover;     
  TheTree.ondragover   =   dragover;     
  TheTree.ondragend   =   dragend;     
  TheTree.ondrop   =   dragdrop;     
  document.onclick   =   click;     
    
  //   drag/drop   code     
    
  //   method   called   as   we   start   drag/drop     
  function   dragstart()   {     
  var   e;     
  e   =   window.event.srcElement;     
  if   (e.tagName   !=   "label")     
  return   false;     
    
  dragElement   =   e.parentElement;     
  }     
    
  //   called   as   we   mouse   over   -   note   that   there   is   special   handling   for   dragover   code     
  //   as   dragleave   doesn't   track   the   toElement/fromElement   as   mouseover/mouseout   does     
  function   dragover()   {     
  if   (window.event.srcElement.tagName   !=   "treeitem")     
  return;     
    
  if   (!dragElement.contains(window.event.srcElement))   {     
  if   (currOver)   {     
  currOver.style.borderTopColor   =   "";     
  }     
  currOver   =   window.event.srcElement;     
  window.event.srcElement.style.borderTopColor   =   "black";     
  event.returnValue   =   false;     
  }     
  }     
    
  //   called   when   drag   is   ended   -   always     
  function   dragend()   {     
  if   (currOver)   {     
  currOver.style.borderTopColor   =   "";     
  }     
  }     
    
  //   called   on   drop     
  function   dragdrop()   {     
  if   (currOver)   {     
  currOver.style.borderTopColor   =   "";     
  }     
  t   =   currOver;     
  t.parentElement.insertBefore(dragElement,   t);     
  }     
    
  //   needed   to   select   items   so   they   can   be   dragged     
  //   drag   drop   only   supported   on   selection   and   images     
  function   preselect()   {     
  var   e;     
    
  e   =   window.event.srcElement;     
  if   (e.tagName   !=   "label")   {     
  return;     
  }     
  r   =   document.body.createTextRange();     
  r.moveToElementText(e);     
  r.select();     
  window.event.cancelBubble   =   true;     
  }     
    
  //   beginning   of   expand/collapse   code     
    
  //   called   to   handle   document   click,   starts   toggling     
  function   click()   {     
  if   (window.event.srcElement.tagName   !=   "label")   {     
  return;     
  }     
  if   (window.event.srcElement.parentElement.children.length   >   1)   {     
  toggleState(window.event.srcElement.parentElement);     
  }     
  }     
    
  //   toggles   expanding/collapse   state   of   an   element   -   does   setup     
  function   toggleState(e)   {     
  e.oHeight   =   e.scrollHeight   +   2;     
  e.style.posHeight   =   e.offsetHeight;     
    
  if   (e.scrollHeight   >=   e.offsetHeight)   {     
  growIt(e);     
  }   else   {     
  shrinkIt(e);     
  }     
  }     
    
  //   called   to   initiate   growing   an   element     
  function   growIt(e)   {     
  currCount   =   0;     
    
  window.setTimeout("doGrow("   +   e.uniqueID   +   ");",   msecs);     
  }     
    
  //   called   to   initiate   shrinking   an   element     
  function   shrinkIt(e)   {     
  currCount   =   0;     
  window.setTimeout("doShrink("   +   e.uniqueID   +   ");",   msecs);     
  }     
    
  //   inner   loop   for   growing   an   object     
  function   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);     
  }     
  else   {     
  e.style.height   =   "";     
  }     
  }     
    
  //   inner   loop   for   shrinking   an   object     
  function   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);     
  }     
  else   {     
  e.style.posHeight   =   lineHeight;     
  }     
  }     
  </script>