轉雨天妹妹的文章：TreeView的DHTML實現（可以實現拖動效果喲）
2024-08-26 00:15:32
供稿：網友
中國最大的web開發資源網站及技術社區，
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>
