中国最大的 الويب 开发资源网站及技术社区 ，
tree.htm
<html xmlns: ie>
<head>
<!-شريط الأدوات->
<!-شريط الأدوات _exempt->
<!-شريط الأدوات->
<style>
ie/: شجرة {display: block ؛}
ie/: treeitem {font-weight: expression (this.children.length> 1؟ 'Bold': 'Normal') ؛ أعلى الحدود: 2 بكسل صلب أبيض ؛ العرض: كتلة ؛ الهامش اليساري: 20 بكسل ؛ الرؤية: الوراثة ؛ الفائض: مخفي. العرض: 100 ٪}
ie/: label {display: inline ؛ المؤشر: اليد}
</style>
</head>
<نمط الجسم = Font-Family: Verdana ؛ حجم الخط: 12px>
<h3> 可以拖动的 شجرة </h3>
<IE: TREE ID = THETREE>
<ie: treeitem> <ie: label id = label1> 1.0 أول مجموعة </ie: label>
<ie: TreeItem> <ie: label> 1.1 megalosaurus </ie: label> </ee: treeitem>
<ie: TreeItem> <ie: label> 1.2 iguanodon </ie: label> </ee: treeitem>
<ie: TreeItem> <ie: label> 1.3 hylaeosaurus </ie: label> </ee: treeitem>
<ie: TreeItem> <ie: label> 1.4 Tyrannosaurus rex </ie: label> </ee: treeitem>
</ie: treeitem>
<ie: TreeItem> <ie: label> 2.0 set later </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> </ee: treeitem>
<ie: TreeItem> <ie: label> 2.2.2 ichthyosaurs </ie: label> </ee: 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> </ee: treeitem>
<ie: TreeItem> <ie: label> 2.4 apatosaurus </ie: label> </ee: treeitem>
<ie: treeitem> <ie: label> 2.5 الثدييات </ie: label> </ie: treeitem>
<ie: treeitem> <ie: label> 2.6 tetrapods </ee: 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 Late Permian </ie: label> </ie: treeitem>
<ie: TreeItem> <ie: label> 2.8 mesozoic </ie: label> </ee: treeitem>
</ie: treeitem>
<ie: TreeItem> <ie: label> 3.0 archosaurs </ie: label>
<ie: TreeItem> <ie: label> 3.1 fenestra الفك السفلي </ie: label> </ie: treeitem>
<ie: treeitem> <ie: label> 3.2 Snout المدببة </ie: label> </ie: treeitem>
<ie: TreeItem> <ie: label> 3.3 زرع الأسنان الثيودي </ie: label> </ee: treeitem>
<ie: TreeItem> <ie: label> 3.4 modified ankle </ie: label> </ie: treeitem>
</ie: treeitem>
<ie: treeitem> <ie: label> 4.0 mesozoic </ee: label>
<ie: TreeItem> <ie: label> 4.1 الحيوانات الأوسط </ie: label> </ie: treeitem>
</ie: treeitem>
</ee: شجرة>
<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! = label)
العودة كاذبة
dragelement = e.parentElement ؛
}
// يسمى كما نحن ماوس - لاحظ أن هناك معالجة خاصة لرمز السحب
// كما لا يتتبع DragLeave toelement/fromelement كما يفعل mouseover/mouseout
وظيفة dragover () {
if (window.event.srcelement.tagname! = TreeItem)
يعود؛
if (! dragelement.contains (window.event.srcelement)) {
إذا (corrover) {
corrover.style.bordertopcolor = ؛
}
corrover = window.event.srcelement ؛
window.event.srcelement.style.BorderTopColor = Black ؛
Event.ReturnValue = false ؛
}
}
// يسمى عند انتهاء السحب - دائمًا
وظيفة dragend () {
إذا (corrover) {
corrover.style.bordertopcolor = ؛
}
}
// استدعاء Drop
وظيفة dragdrop () {
إذا (corrover) {
corrover.style.bordertopcolor = ؛
}
t = currover ؛
T.ParentElement.InserTbefore (dragelement ، t) ؛
}
// مطلوب لتحديد العناصر حتى يمكن سحبها
// DRAC DROP مدعوم فقط على الاختيار والصور
وظيفة 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) ؛
}
}
// تبادل التوسع/انهيار حالة عنصر - لا يعيد الإعداد
وظيفة تبديل (هـ) {
e.oheight = e.scrollheight + 2 ؛
e.style.posheight = e.offsetheight ؛
if (e.scrollheight> = e.offsetheight) {
تنمو (هـ) ؛
} آخر {
تقلص (هـ) ؛
}
}
// استدعاء لبدء تنمية عنصر
وظيفة تنمو (ه) {
currcount = 0 ؛
Window.SettImeOut (doRwrow ( + e.uniqueid +) ؛ ، msecs) ؛
}
// استدعاء لبدء تقليص عنصر
وظيفة الانكماش (هـ) {
currcount = 0 ؛
Window.SettImeout (doshrink ( + e.uniqueid +) ؛ ، msecs) ؛
}
// حلقة داخلية لتنمية كائن
وظيفة doRder (e) {
var dh ؛
var lineheight = echildren [0] .OffSetheight ؛
currcount ++ ؛
dh = e.oHeight / flycount ؛
if (e.style.posheight! =
e.style.posheight += dh ؛
}
if (currcount <flycount) {
Window.SettImeOut (doRwrow ( + e.uniqueid +) ؛ ، msecs) ؛
}
آخر {
E.Style.Height = ؛
}
}
// حلقة داخلية لتقليص كائن
وظيفة doshrink (e) {
var dh ، dw ؛
var lineheight = echildren [0] .OffSetheight ؛
var p ؛
currcount ++ ؛
dh = (e.oHeight - lineheight) / flycount ؛
e.style.posheight -= dh ؛
if (currcount <flycount) {
Window.SettImeout (doshrink ( + e.uniqueid +) ؛ ، msecs) ؛
}
آخر {
e.style.posheight = lineheight ؛
}
}
</script>
</body>
</html>