Web ， ，,
tree.htm
<html xmlns : IE>
<헤드>
<!-Toolbar_Start->
<!-Toolbar_Exempt->
<!-Toolbar_end->
<스타일>
IE/: Tree {display : block;}
IE/: treeitem {font-weight : expression (this.children.length> 1? 'bold': '정상'); 테두리 : 2px 솔리드 흰색; 디스플레이 : 블록; 마진 왼쪽 : 20px; 가시성 : 상속; 오버플로 : 숨겨진; 너비 : 100%}
IE/: 레이블 {디스플레이 : 인라인; 커서 : 핸드}
</스타일>
</head>
<Body Style = Font-Family : Verdana; 글꼴 크기 : 12px>
<H3> 可以拖动的 트리 </h3>
<IE : 트리 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 </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 : 레이블> </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 : 레이블> </IE : TreeItem>
<IE : TreeItem> <IE : LABEL> 2.6 TETRAPODS </IE : LABEL>
<IE : TreeItem> <IE : LABEL> 2.6.1 양서류 </IE : 레이블> </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 바다 거북 </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 : 레이블>
<IE : TreeItem> <IE : LABEL> 3.1 하악 Fenestra </IE : LABEL> </IE : TreeItem>
<IE : TreeItem> <IE : LABEL> 3.2 뾰족한 주둥이 </IE : 레이블> </IE : TreeItem>
<IE : TreeItem> <IE : LABATE> 3.3 Theocodant Tooth Embeltation </IE : Label> </IE : TreeItem>
<IE : TreeItem> <IE : label> 3.4 수정 발목 </ie : label> </ie : treeitem>
</ie : treeitem>
<IE : TreeItem> <IE : LABEL> 4.0 mesozoic </ie : 레이블>
<IE : TreeItem> <IE : LABEL> 4.1 중간 동물 </IE : 라벨> </IE : TreeItem>
</ie : treeitem>
</ie : 트리>
<cript>
// 드래그/드롭의 변수
var dragelement = null;
var droplement = null;
var currover = null;
// 확장/붕괴를위한 변수
var flycount = 5;
var msecs = 5;
var currcount = 0;
// 이벤트 핸들러 연결
thetree.onmousedown = 사전 선택;
THETREE.ONDRAGSTART = DRAGSTART;
thetree.ondragend = 드래그;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = 드래그;
thetree.ondrop = Dragdrop;
document.onclick = 클릭;
// 코드를 드래그/드롭합니다
// 드래그/드롭을 시작할 때 호출되었습니다
함수 dragStart () {
var e;
e = window.event.srcelement;
if (e.tagname! = label)
거짓을 반환합니다.
드래그 멘션 = E.ParentElement;
}
// 우리가 마우스 오버로 호출 - 드래그 오버 코드에 대한 특수 처리가 있음에 유의하십시오.
// Dragleave가 마우스 오버/마우스 아웃처럼 토수/Fromelement를 추적하지 않습니다.
함수 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 = 검은 색;
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.creatextrange ();
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.offsetheight;
if (e.scrollheight> = e.offsetheight) {
성장 (e);
} 또 다른 {
수축 (e);
}
}
// 요소 성장을 시작하기 위해 호출되었습니다
기능 성장 (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;
}
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;
}
}
</스크립트>
</body>
</html>