TreeView的DHTML实现（可以实现拖动效果哟）-优快云博客

本文链接：https://blog.youkuaiyun.com/winderxp/article/details/1550109

tree.htm

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

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

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