Переносимые окна

Создайте виджет окна для чата.

Окно — это DIV, который можно переносить, взявшись за заголовок. По нажатию на «Послать» данные передаются в содержание окна.

Синтаксис:

new DraggableWindow("Чат с Петей");

Возможно появление прокрутки внутри окна, если сообщений много. Сообщения не должны вылезать вовне окна.
Окно нельзя вытащить за пределы экрана, даже резкими движениями мыши. Влево-вправо-вверх оно вообще не должно вылезать за границу, а вниз — только до заголовка. Попробуйте перемещать его в
примере, чтобы увидеть.
Для задания DOM-структуры окна используйте шаблон. Может быть создано несколько окон.

Подсказки

Решение

Подсказки

Так как высота и ширина окна известны, вёрстка внутри может содержать точные пиксельные размеры.
При обработке события document.onmousemove, мы вычисляем новые координаты left/top и смотрим, вылезает ли окно за границы. Если да — меняем left/top на максимально возможные, чтобы не вылезало.
На форме вешаем обработчик onsubmit, т.к. иначе Enter в поле отправить её на сервер.

Решение

#439

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Помоги другим узнать о хорошей статье!