中国最大的web开发资源网站及技术社区，
tree.htm
<HTML XMLNS：IE>
<头>
<！ - Toolbar_start->
<！ - Toolbar_exempt->
<！ - Toolbar_end->
<样式>
ie/：tree {display：block;}
ie/：treeItem {font-jight：expression（this.children.length> 1？'bold'：'normal'）;边界顶：2PX固体白色；显示：块；左键：20px;可见性：继承；溢出：隐藏；宽度：100％}
ie/：label {display：inline;光标：手}
</style>
</head>
<身体样式=字体家庭：verdana;字体大小：12px>
<h3>可以拖动的树</h3>
<ie：树ID = thetree>
在
<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霸王龙</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeItem> <ie：label> 2.0后来设置</ie：label>
<ie：treeTem> <ie：label> 2.1猛mm象</ie：label> </ie：treeItem>
<ie：treeTem> <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哺乳动物</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6 tetrapods </ie：label>
<ie：treeItem> <ie：label> 2.6.1两栖动物</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.2鲸鱼</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.3鳄鱼</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.6.4海龟</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeItem> <ie：label> 2.7晚二叠纪</ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 2.8中生代</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeTem> <ie：label> 3.0 Archosaurs </ie：label>
<ie：treeItem> <ie：label> 3.1下颌fenestra </ie：label> </ie：treeitem>
<ie：treeItem> <ie：label> 3.2指向鼻子</ie：label> </ie：treeitem>
在
<ie：treeItem> <ie：label> 3.4修改脚踝</ie：label> </ie：treeitem>
</ie：treeItem>
<ie：treeTem> <ie：label> 4.0中生代</ie：label>
<ie：treeItem> <ie：label> 4.1中间动物</ie：label> </ie：treeitem>
</ie：treeItem>
</ie：树>
<script>
//拖放/滴的变量
var dragelement = null;
var dropelement = null;
var currover = null;
//用于扩展/崩溃的变量
var flycount = 5;
var msecs = 5;
var currcount = 0;
//活动处理程序连接
thetree.onmousedown = preselect;
thetree.ondragstart = dragstart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = dragend;
thetree.ondrop = dragdrop;
document.onclick =单击;
//拖动/删除代码
//我们开始拖动/掉落时调用方法
函数dragstart（）{
var e;
e = window.event.srcelement;
如果（e.tagname！=标签）
返回false;
拖曳= e.parentelement;
}
//鼠标鼠标鼠标 - 请注意，拖动代码有特殊处理
//因为dragleave不会像鼠标/鼠标一样跟踪tO element/fromlement
函数dragover（）{
if（window.event.srcelement.tagname！= treeItem）
返回;
if（！dragelement.contains（window.event.srcelement））{
if（currover）{
currover.style.bordertopcolor =;
}
currover = window.event.srcelement;
window.event.srcelement.Style.BorderTopColor = black;
event.returnvalue = false;
}
}
//当阻力结束时打电话 - 总是
函数dragend（）{
if（currover）{
currover.style.bordertopcolor =;
}
}
//呼叫下降
功能dragdrop（）{
if（currover）{
currover.style.bordertopcolor =;
}
t = currover;
t.parentelement.insertbefore（dragelement，t）;
}
//选择项目需要拖动
//仅在选择和图像上支撑的阻力滴
函数preselect（）{
var e;
e = window.event.srcelement;
if（e.tagname！= label）{
返回;
}
r = document.body.createtExtrange（）;
R.MovetoElementText（E）;
r.Select（）;
window.event.cancelBubble = true;
}
//扩展/崩溃代码的开始
//打电话来处理文档单击，开始切换
函数单击（）{
if（window.event.srcelement.tagname！= label）{
返回;
}
if（window.event.srcelement.parentelement.children.length> 1）{
togglestate（window.event.srcelement.parentelement）;
}
}
//切换元素的扩展/倒塌状态 - 确实设置了
函数togglestate（e）{
e.oheight = e.scrollheight + 2;
e.Style.posheight = e.offseight;
if（e.scrollheight> = e.offsetheight）{
growit（e）;
} 别的 {
收缩（E）;
}
}
//呼吁启动成长元素
功能growit（e）{
currcount = 0;
window.setTimeOut（doGrow（ + e.uniqueId +）;，msecs）;
}
//打电话开始收缩元素
功能收缩（E）{
currcount = 0;
window.setTimeOut（doshrink（ + e.uniqueId +）;，msecs）;
}
//内部循环生长一个物体
功能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;
}
如果（Currcount <flyCount）{
window.setTimeOut（doGrow（ + e.uniqueId +）;，msecs）;
}
别的 {
e.Style.Height =;
}
}
//缩小对象的内部循环
功能doshrink（e）{
var dh，dw;
var lineHeight = E.Children [0] .offsetheight;
var p;
Currcount ++;
dh =（e.oheight -lineHeight） / flyCount;
e.Style.posheight- = DH;
如果（Currcount <flyCount）{
window.setTimeOut（doshrink（ + e.uniqueId +）;，msecs）;
}
别的 {
e.Style.posheight = lineHeight;
}
}
</script>
</body>
</html>