Форум АНТИЧАТ - Небольшой рассказик =))) от меня...

Короче строго не судите =))) просто хотел поделиться мыслями внутри моей головы. Может кто-то улыбнется, читая следующие строки. А это главное.

В общем, задача - сделать вот такое вот меню на javascript (отрытие разделов, добавлние разделов, перетаскивание разделов вместе со всеми подразделами и прочее, прочее прочее) и xmlhttprequest без перезагрузки страницы соответственно...

http://www.nnm.ru/filez/menu.jpg
С виду задача простая. Да и решение не очень сложное, но пара подводных комней есть. Я не пытаюсь объяснить как делать такое меню данным текстом. Я пытаюсь подойти к этому с литературной стороны. Итак. Поехали...

Трин представил в голове как все будет крутится... Красиво блин =) Начал со структуры таблицы. Соответственно, для подобной задачи выбирает технологию смежных вершин для организации дерева каталогов. Что такое "смежные вершины" он никогда не знал, не знает и врядли когда-нить сможен объяснить. Все что друзьям удавалось из него вытянуть по этой технологии, это: "Да хрен знает. Короче это такой способ организации дерева, которой совсем не очевидный и еще менее понятный. Да поможет тебе гугль.". Где-то он прав... Не суть.
Структура готова, тут ничего сложного. Вбил парочку каталогов для тестов и пошел верстать все это на страницу... На протяжении вот уже почти года Трин верстает страницы с точки зрения философии CSS. Очевидно что и это меню-каталог он решает делать на списках (<ul></ul>). А зря...
Через пол часа поиска логики построения нужных открывающихся и закрывающихся тегов списков он судорожно вставляет рандомный код в рандомное место скрипта, пытясь получить искомый результат. Еще через пол часа успокаивается, открывает здорову тетрадь и рисует очередную блок-схему. Черкает ее... Рисует новую. Думает, что как же жаль, что способ "рандом в рандом" в данном случае не помог. Наконец дорисовывает вроде как абсолютно точный алгоритм расстановки тегов и переводит его на php. Наконец-то код генерится как надо... Славит йайца словами: "Слава йайцам" и добавляет кнопочку "добавить раздел" в каждый из разделов. Смотрит. Куча текста, нихрена не понятно... Тырит иконки с simplebits.com (он всегда их тырит, дорисовывает пару пикселей, меняет цветовую гамму и выдает за свои. У него, по официальным данным, 170 метров иконок для сайтов на винте)

http://simplebits.com/img/mini-preview.gif

Плюсики и точки рисует сам. Вставляет всю эту требуху в CSS - работает... Радуется и идет за шоколадкой. По дороге вспоминает что на диете и возвращается. По дороге вспоминает что диета с понедельника и снова направляется к холодильнику.
Пишет добавление разделов в разделы итп. Тут все просто. AJAX выводит новое окошко, вписывается новое имя, тем же xmlhttprequest добавляется запись в БД а тем временем средствами javascript добавляется новый элемент списка в нужное место. Потестил... через какое-то время все содержимое страницы очутилось в списке... "Хмм...", - сказал Трин и полез в БД. в таблице с деревом, там где вложенные множества, творился хаос... "Хмм...", - еще раз сказал Трин. На этот раз более продолжительно. Открыл скрипт добавления записи и снов сво большу тетрадку. Нарисовал дерево, расставил правые и левые ключи, пересчитал. Переписал скрипт. Сново потестил - все работало. Это было достаточно странно...
"ОМГ!", - воскликнул Трин, вспомнив о существовании IE. Он не ошибся, в IE был именно ОМГ. Но ОМГ был лишь с первого взгляда. 5 минут ковыряния CSS со спецификацией и в IE тоже царила красота. Оставалось доделать "живое" перетаскиваение элементов меню. Никакой сложности это не представляло... с первого взгляда.
Начал Трин со своего любимого =))) с юмора =))) Немного поколдовав над явой он получил следующую картину:

http://www.nnm.ru/filez/menu2.jpg

Поржал он, надо сказать, от души =)))
Продолжил. Вроде все просто. Создал новый li элемент средствами javascript, приаттачил его ребенком к своему списку, всунул текст, идентичный тексту элемента списка, на которм было зарегистрировано onMouseDown, применил новому li абсолютное позиционирование и зарек бегать за курсором мышки. Все просто. Но как понять в какой пункт меню был "перетащен" текущий пункт меню? На первый взгляд тоже вроде просто... ловить событие onMouseUp на каждом из пунктов, тем самым получая нужные данные... Не тут то было. При onMouseDown IE блочит все MouseEvent события кроме текущего... Трин всеми клеточками совего достаточно жирного организма начал понимать, насколько же сильно он ненавидит IE... Открыл большой javascript справочник, купленный в книжном "Москва" в 12 часов ночи на голодные желудок, пролистал до MouseEvent... вычитал что в IE для event существует свойство srcElement, которое отдает элемент документа, в котором произошло событие... Посмотрел на потолок и понял всеми клеточками своего достаточно толстого тела, как же он любит IE... Тестит - не пашет... "Странная йухня", - подумал трин и тут вдруг еще один "ОМГ" пробежал в его голове... Он убрал к чертям этот srcElement и почистил кеш IE. Все работало... его теория о том что IE блочит все MouseEvent при событии одного из них полетела прахом.
Вот так вот в течении всего дня Трин сделал подобное меню. Завтра заказчику он будет со стеклянными глозами говорить что это ерунда и работы там на 15 минут было... такой вот он урод =)))

Ладно, на этом все =))) тут друзья приехали, требуют продолжение пятницы =) всем удачи