简单的可拖拉的Tree

最新推荐文章于 2025-04-03 17:47:46 发布
转载最新推荐文章于 2025-04-03 17:47:46 发布 · 740 阅读
文章标签：
#tree #ie
JS&HTML&CSS 专栏收录该内容
34 篇文章
订阅专栏
<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) { 
   ee.oHeight = e.scrollHeight + 2; 
   ee.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>