转雨天妹妹的文章：TreeView的DHTML实现（可以实现拖动效果哟）

2022-07-15 80酷酷网 80kuku.com

dhtml|treeviewtree.htm
<html xmlns:ie>
<head>



<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 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>