中国最大的เว็บ开发资源网站及技术社区，
Tree.htm
<html xmlns: เช่น>
<head>
<!-toolbar_start->
<!-toolbar_exempt->
<!-toolbar_end->
<style>
IE/: Tree {display: block;}
IE/: TreeItem {Font-Weight: Expression (this.children.length> 1? 'bold': 'ปกติ'); ขอบด้านบน: 2px Solid White; Display: Block; ขอบซ้าย: 20px; ทัศนวิสัย: สืบทอด; ล้น: ซ่อน; ความกว้าง: 100%}
IE/: label {display: inline; เคอร์เซอร์: มือ}
</style>
</head>
<body style = 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> </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 SET LATE LATE </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 ปลาวาฬ </IE: LABEL> </IE: TREEITEM>
<IE: TreeItem> <IE: LABEL> 2.6.3 CROCODILES </IE: LABEL> </IE: TREEITEM>
<IE: TreeItem> <IE: Label> 2.6.4 เต่าทะเล </IE: label> </IE: TreeItem>
</iE: TreeItem>
<IE: TreeItem> <IE: LABEL> 2.7 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 Snout แหลม </ie: label> </ie: TreeItem>
<IE: TreeItem> <IE: LABEL> 3.3 การฝังฟันของ Theocodant </IE: LABEL> </IE: TREEITEM>
<IE: TreeItem> <IE: LABEL> 3.4 ข้อเท้าที่แก้ไขแล้ว </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>
</he: Tree>
<script>
// ตัวแปรสำหรับการลาก/ดร็อป
var dragelement = null;
var dropelement = null;
var currover = null;
// ตัวแปรสำหรับการขยาย/ยุบ
var flycount = 5;
var msecs = 5;
var currcount = 0;
// Handler Handler Event
thetree.onmousedown = preselect;
thetree.ondragstart = dragstart;
thetree.ondragend = dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = dragend;
thetree.ondrop = dragdrop;
document.onclick = คลิก;
// drag/drop code
// วิธีที่เรียกว่าเมื่อเราเริ่มลาก/ดร็อป
ฟังก์ชั่น dragstart () {
var e;
e = window.event.sreceement;
if (e.tagname! = label)
กลับเท็จ;
dragelement = e.parentelement;
-
// เรียกขณะที่เราเมาส์ - โปรดทราบว่ามีการจัดการพิเศษสำหรับรหัส Dragover
// ในขณะที่ Dragleave ไม่ได้ติดตาม ToElement/From -element ตามที่ MouseOver/MouseOut ทำ
ฟังก์ชั่น dragover () {
if (window.event.srcelement.tagname! = TreeItem)
กลับ;
if (! dragelement.contains (window.event.srcelement)) {
ถ้า (Currover) {
currover.style.BorderTopColor =;
-
currover = window.event.srcelement;
window.event.srelement.style.bordertopcolor = ดำ;
Event.ReturnValue = FALSE;
-
-
// เรียกว่าเมื่อการลากสิ้นสุดลง - เสมอ
ฟังก์ชั่น dragend () {
ถ้า (Currover) {
currover.style.BorderTopColor =;
-
-
// เรียกว่าดร็อป
ฟังก์ชั่น dragdrop () {
ถ้า (Currover) {
currover.style.BorderTopColor =;
-
t = currover;
t.parentelement.insertbefore (dragelement, t);
-
// จำเป็นต้องเลือกรายการเพื่อให้สามารถลากได้
// drag drop รองรับเฉพาะในการเลือกและรูปภาพ
ฟังก์ชั่น preSelect () {
var e;
e = window.event.sreceement;
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.srelement.parentelement);
-
-
// สลับการขยาย/ยุบสถานะขององค์ประกอบ - ตั้งค่า
ฟังก์ชั่น togglestate (e) {
e.oheight = E.Scrollheight + 2;
E. Style.posheight = e.offSetheight;
ถ้า (e.scrollheight> = e.offSetheight) {
Growit (E);
} อื่น {
หดตัว (e);
-
-
// เรียกให้เริ่มการเติบโตขององค์ประกอบ
ฟังก์ชั่น Growit (e) {
currcount = 0;
window.settimeout (dogrow ( + e.uniqueid +);, msecs);
-
// เรียกให้เริ่มการหดองค์ประกอบ
ฟังก์ชั่น Shrinkit (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;
-
if (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;
if (currcount <flycount) {
window.settimeout (doshrink ( + e.uniqueid +);, msecs);
-
อื่น {
E. Style.posheight = LineHeight;
-
-
</script>
</body>
</html>