TreeView的DHTML实现（可以实现拖动效果哟）

tree.htm
< html xmlns:ie >
< head >
<!--  TOOLBAR_START  -->
<!--  TOOLBAR_EXEMPT  -->
<!--  TOOLBAR_END  -->  
< 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: 20px; visibility: inherit; overflow: hidden; width: 100%}
    ie:label  ... {display: inline; cursor: hand}
   </ style >     
</ head >
< body style = " font-family: verdana; font-size: 12px " >
< 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 >  
        < ie:treeitem >< ie:label > 2.6 . 1  Amphibians </ 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: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 >  
</ body >  
</ html >