中国最大的 Интернет 开发资源网站及技术社区 ，
Дерево.htm
<html xmlns: т.е.>
<голова>
<!-Toolbar_start->
<!-Toolbar_Exempt->
<!-Toolbar_end->
<style>
т.е./: tree {display: block;}
IE/: TreeItem {Font-Weight: Expression (this.children.length> 1? '' Bold ':' Нормальный '); Пограничная топ: 2PX Solid White; дисплей: блок; Полевая левая: 20px; видимость: наследуя; переполнение: скрыто; Ширина: 100%}
т.е./: метка {Display: inline; курсор: рука}
</style>
</head>
<Стиль тела = семья font: Вердана; Размер шрифта: 12px>
<h3> 可以拖动的 Дерево </h3>
<IE: Tree Id = ThetRee>
<IE: TreeItem> <IE: label id = label1> 1.0 Первый набор </ie: label>
<IE: TreeItem> <IE: метка> 1,1 мегалозавра </т.е.: метка> </т.е.
<IE: TreeItem> <IE: метка> 1.2 Iguanodon </ie: label> </ie: treeitem>
<IE: TreeItem> <IE: метка> 1.3 Hylaeosaurus </ie: метка> </ie: treeitem>
<IE: TreeItem> <IE: метка> 1.4 Tyrannosaurus rex </ie: метка> </ie: treeitem>
</т.е.: reeliTem>
<IE: TreeItem> <IE: метка> 2.0 позже установлен </т.е.: метка>
<IE: TreeItem> <IE: метка> 2.1 Мамонт </т.е.: Метка> </IE: TreeItem>
<IE: TreeItem> <IE: метка> 2.2 Mastodons </ie: label>
<IE: TreeItem> <IE: метка> 2.2.1 Plesiosaurs </ie: label> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2.2.2 Ichthyosaurs </ie: метка> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2.2.3 Dimetrodon </ie: label> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2.2.4 SinapsId </ie: label> </ie: treeitem>
</т.е.: reeliTem>
<IE: TreeItem> <IE: метка> 2.3 Stegosaurus </ie: label> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2.4 Apatosaurus </IE: MABL> </IE: TreeItem>
<IE: TreeItem> <IE: метка> 2,5 млекопитающих </т.е.: метка> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2,6 тетрапод </т.е.: метка>
<IE: TreeItem> <IE: метка> 2.6.1 амфибии </т.е.: метка> </т.е.
<IE: TreeItem> <IE: метка> 2.6.2 китов </т.е.: метка> </ie: treeitem>
<IE: TreeItem> <IE: метка> 2.6.3 Крокодилы </IE: Метка> </IE: TreeItem>
<IE: TreeItem> <IE: метка> 2.6.4 Sea Turtles </ie: Mabel> </ie: treeitem>
</т.е.: reeliTem>
<IE: TreeItem> <IE: метка> 2.7 Поздний Пермский </т.е.: метка> </т.е.: treeitem>
<IE: TreeItem> <IE: метка> 2.8 Мезозойс </т.е.
</т.е.: reeliTem>
<IE: TreeItem> <IE: метка> 3.0 Archosaurs </IE: Label>
<IE: TreeItem> <IE: метка> 3.1 Медиблютный фенестра </IE: Метка> </IE: TreeItem>
<IE: TreeItem> <IE: метка> 3.2 Упомянутая морда </т.е.: метка> </т.е.: treeItem>
<IE: TreeItem> <IE: метка> 3.3 Теокодант -имплантация зуба </т.е.: метка> </т.е.
<IE: TreeItem> <IE: метка> 3.4 Модифицированная лодыжка </ie: метка> </ie: treeitem>
</т.е.: reeliTem>
<IE: TreeItem> <IE: метка> 4.0 Мезозойс </т.е.: метка>
<IE: TreeItem> <IE: метка> 4.1 Средние животные </IE: Метка> </IE: TreeItem>
</т.е.: reeliTem>
</т.е. Дерево>
<Скрипт>
// переменные для перетаскивания/падения
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 = Dragend;
thetree.ondragenter = dragover;
thetree.ondragover = dragover;
thetree.ondragend = Dragend;
thetree.ondrop = dragdrop;
document.onclick = click;
// код перетаскивания
// метод вызывается по мере того, как мы начинаем перетаскиваться
function dragstart () {
var e;
e = window.event.srcelement;
if (e.tagname! = label)
вернуть ложь;
dragelement = e.parentelement;
}
// Вызывается как мы мышим - обратите внимание, что есть специальная обработка для кода драгвера
// как Dragleave не отслеживает Toelement/FromElement, как MouseOver/Mouseout
функция 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 =;
}
}
// Вызовите каплю
функция ragdrop () {
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;
}
// Начало кода расширения/коллапса
// Звожен для обработки документов, начинает переключать
функция click () {
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);
} еще {
sharinkit (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>