Вікно, яке можна перетягнути
Наведіть курсор миші на заголовок вікна, натисніть на ліву клавішу
миші, і, не відпускаючи, перетягніть вікно в інше місце.
Визначити, що користувач натиснув на клавішу миші, коли курсор був над заголовком вікна, нам допоможе обробник події onmousedown. який призначимо заголовку вікна (точніше об'єкту заголовка вікна)
У відповідності зі стандартами W3C DOM обробники подій задаються методом addEventListener () (який підтримується браузерами Firefox і Opera)
При використанні цього методу після спрацьовування події викликається, автоматично отримає об'єкт події в якості єдиного аргументу. Тобто при роботі скрипта в браузерах Firefox і Opera функція save_delta_koor (obj_evt) отримає в змінної obj_evt об'єкт події, в той час як при роботі в браузері Internet Explorer в змінної obj_evt нічого не буде. У браузерах Firefox і Opera координати курсора миші знаходяться за допомогою властивостей pageX і pageY отриманого об'єкта події
У браузері Internet Explorer координати курсора миші визначаються за допомогою об'єкту window.event і властивостей clientX і clientY
Після натискання на кнопку миші, запуститься функція save_delta_koor (). Функція save_delta_koor () обчислює координати миші і координати вікна (блоку DIV з id = "zagol_okno1"), а потім різницю координат (delta_x і delta_y). Для відстеження переміщення курсору будемо використовувати обробник події onmousemove, який призначимо всьому документу
Для браузерів Firefox і Opera також поставимо обробник подій відповідно до стандартів
У цьому випадку функція motor_okno () при роботі скрипта в браузерах Firefox і Opera отримає в якості єдиного аргументу об'єкт події.
При переміщенні покажчика миші буде викликатися функція motor_okno (). яка обчислює нові координати покажчика миші, а потім нові координати вікна, і відповідно переміщує наше вікно.
Переміщати вікно можна лише, утримуючи клавішу миші, тому після відпускання клавіші потрібно зупинити виконання функції motot_okno (). Як ви пам'ятаєте, ця функція викликається обробником події onmousemove об'єкта document. Перехопити момент, коли користувач відпустив кнопку миші, допоможе обробник події onmouseup, який призначимо всьому документу
Тепер, коли користувач відпустить кнопку миші, буде викликана функція clear_delta_koor (). яка "очистить" обробник події переміщення курсора миші