Веб-компас сайтостроителей
Перетаскиваемые элементы на JavaScript
Иногда при разработке ресурса думаешь, что внедрение на страницу сайта перетаскиваемого элемента (например, всплывающего окна, сделанного с помощью блока DIV) существенно облегчило бы работу с сайтом. Поэтому рассмотрим, как можно сделать перетаскиваемые элементы на JavaScript.
Перетаскиваемый элемент в принципе может быть любым, но для примера рассмотрим, как можно сделать перетаскиваемое окно, выполненное с помощью блока DIV. Причем перетаскиваться окно должно за заголовок. Итак, для начала посмотрим, что нужно сделать, в общем, для создания перетаскиваемого элемента
Теперь рассмотрим подробнее.
Как сделать абсолютно позиционируемый блок DIV, наверное, понятно: нужно в каскадных таблицах стилей прописать для блока свойство position со значением absolute. Код HTML окна
В соответствии со стандартами 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(), которая "очистит" обработчик события перемещения курсора мыши
Для удобства использования скрипта создадим функцию setup_mouse(), которая будет инициализировать необходимые объекты и обработчики событии. Этой функции необходимо лишь передать идентификаторы блоков окна и заголовка.
Для определения, в каком браузере работает страница, в самом начале поместим несколько строк JavaScript-а, которые и определят тип браузера.
Скрипт можно вынести в отдельный файл и переделать так, чтобы он сразу работал с несколькими окнами на одной странице. Приводить код здесь не буду, помещу в архив, и скачать его можно по ниже приведенной ссылке:
Посмотреть работу данного скрипта можно на странице тут
Перетаскиваемый элемент в принципе может быть любым, но для примера рассмотрим, как можно сделать перетаскиваемое окно, выполненное с помощью блока DIV. Причем перетаскиваться окно должно за заголовок. Итак, для начала посмотрим, что нужно сделать, в общем, для создания перетаскиваемого элемента
- Перетаскиваемый элемент (блок DIV в нашем случае) должен быть абсолютно позиционированным;
- После нажатия на клавишу мыши, когда курсор находится над нужным нам элементом (в данном случае над заголовком окна), запоминаем разницу координат нашего перемещаемого окна и указателя мыши;
- Если клавиша не была отпущена, и пользователь перемещает указатель мыши, то получаем новые координаты окна, просто суммируя запомненную разницу координат и новые координаты указателя мыши.
Теперь рассмотрим подробнее.
Как сделать абсолютно позиционируемый блок DIV, наверное, понятно: нужно в каскадных таблицах стилей прописать для блока свойство position со значением absolute. Код HTML окна
Код
<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div>
</div>
Определить, что пользователь нажал на клавишу мыши, когда курсор был над заголовком окна, нам поможет обработчик события onmousedown, который назначим заголовку окна (точнее объекту заголовка окна)
Код
obj_zagol_okno.onmousedown = save_delta_koor;
В соответствии со стандартами W3C DOM обработчики событий задаются методом addEventListener() (который поддерживается браузерами Firefox и Opera)
Код
obj_zagol_okno.addEventListener("onmousedown",save_delta_koor,false);
При использовании этого метода после срабатывания события вызываемая функция автоматически получит объект события в качестве единственного аргумента. То есть при работе скрипта в браузерах Firefox и Opera функция save_delta_koor(obj_evt) получит в переменной obj_evt объект события, в то время как при работе в браузере Internet Explorer в переменной obj_evt ничего не будет. В браузерах Firefox и Opera координаты курсора мыши находятся с помощью свойств pageX и pageY полученного объекта события
Код
x=obj_evt.pageX;
y=obj_evt.pageY;
В браузере Internet Explorer координаты курсора мыши определяются с помощью объекта window.event и свойств clientX и clientY
Код
x=window.event.clientX;
y=window.event.clientY;
После нажатия на клавишу мыши, запустится функция save_delta_koor(). Функция save_delta_koor() вычисляет координаты мыши и координаты окна (блока DIV с id = "zagol_okno1"), а затем разницу координат (delta_x и delta_y). Для отслеживания перемещения курсора будем использовать обработчик события onmousemove, который назначим всему документу
Код
document.onmousemove = motor_okno;
Для браузеров Firefox и Opera также зададим обработчик событий в соответствии со стандартами
Код
document.addEventListener("onmousemove",motor_okno,false);
В этом случае функция motor_okno() при работе скрипта в браузерах Firefox и Opera получит в качестве единственного аргумента объект события.
При перемещении указателя мыши будет вызываться функция motor_okno(), которая вычисляет новые координаты указателя мыши, а затем новые координаты окна, и соответственно перемещает наше окно.
Перемещать окно можно лишь при нажатой клавише мыши, поэтому после отпускания клавиши нужно остановить выполнение функции motot_okno(). Как вы помните, эта функция вызывается обработчиком события onmousemove объекта document. Перехватить момент, когда пользователь отпустил клавишу мыши, поможет обработчик события onmouseup, который назначим всему документу
Код
document.onmouseup = clear_delta_koor;
Теперь, когда пользователь отпустит клавишу мыши, будет вызвана функция clear_delta_koor(), которая "очистит" обработчик события перемещения курсора мыши
Код
document.onmousemove = null;
Для удобства использования скрипта создадим функцию setup_mouse(), которая будет инициализировать необходимые объекты и обработчики событии. Этой функции необходимо лишь передать идентификаторы блоков окна и заголовка.
Для определения, в каком браузере работает страница, в самом начале поместим несколько строк JavaScript-а, которые и определят тип браузера.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Окна</title>
<style type='text/css'>
body { margin:0px; padding:0px; font-family: verdana, sans-serif; font-size:12px; }
h1 { text-align:center; margin-top:10px; }
.div_okno { position:absolute; }
.div_zagol_okno { cursor:move;
background: url("./images/fon_left_zagol.gif") no-repeat;
font-weight:bold; color:#8CF4EF; }
.div_zagol_okno div { padding-left:10px; padding-right:10px;
background: url("./images/fon_right_zagol.gif") right top no-repeat; }
.div_zagol_okno div div { padding:3px; background:#7c9992 url("./images/fon_zagol.gif"); white-space:nowrap; }
.content_okno { padding:5px; background:#C0C0C0; }
#div_okno1 { top:120px; left:300px; width:300px; }
</style>
</head>
<body>
<h1>Перетаскиваемые элементы на JavaScript</h1>
<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div>
</div>
<script type='text/javascript'>
/* определим тип браузера */
var bIE=0;bOp=0;bFF=0;
var verBr=navigator.userAgent;
if (verBr.indexOf("Opera")!=-1)
bOp=1;
else
{
if (verBr.indexOf("MSIE")!=-1)
bIE=1;
else
{
//if (verBr.indexOf("Firefox")!=-1)
bFF=1;
}
}
setup_mouse("div_okno1","zagol_okno1");
var obj_okno;
var obj_zagol_okno;
delta_x=0;
delta_y=0;
function setup_mouse(id_div_okno,id_div_zagol)
{
obj_okno=document.getElementById(id_div_okno);
obj_zagol_okno=document.getElementById(id_div_zagol);
obj_zagol_okno.onmousedown=save_delta_koor;
if (bOp || bFF)
{
obj_zagol_okno.addEventListener("onmousedown",save_delta_koor,false);
}
document.onmouseup=clear_delta_koor;
}
function save_delta_koor(obj_evt)
{
if (obj_evt)
{
x=obj_evt.pageX;
y=obj_evt.pageY;
}
else
{
x=window.event.clientX;
y=window.event.clientY;
if (bIE)
{
y-=2;
x-=2;
}
}
x_okno=obj_okno.offsetLeft;
y_okno=obj_okno.offsetTop;
delta_x=x_okno-x;
delta_y=y_okno-y;
document.onmousemove=motor_okno;
if (bOp || bFF)
document.addEventListener("onmousemove",motor_okno,false);
}
function clear_delta_koor()
{
document.onmousemove=null;
}
function motor_okno(obj_event)
{
if (obj_event)
{
x=obj_event.pageX;
y=obj_event.pageY;
}
else
{
x=window.event.clientX;
y=window.event.clientY;
if (bIE)
{
y-=2;
x-=2;
}
}
new_x=delta_x+x;
new_y=delta_y+y;
obj_okno.style.top=new_y+"px";
obj_okno.style.left=new_x+"px";
}
</script>
</body>
</html>
В примере так же добавлен код для внешнего оформления элементов страницы, с ним я думаю все понятно. Посмотреть работу данного скрипта можно на странице тут
Скрипт можно вынести в отдельный файл и переделать так, чтобы он сразу работал с несколькими окнами на одной странице. Приводить код здесь не буду, помещу в архив, и скачать его можно по ниже приведенной ссылке:
Описание: Скрипт "Перетаскиваемые элементы на JavaScript"
Скачать Размер: 5.35 KB. Количество скачиваний: 2625
Скачать Размер: 5.35 KB. Количество скачиваний: 2625
Использовать данный скрипт нужно следующим образом:
- Создаем окна на странице, они должны быть абсолютно позиционированные, самый внешний элемент div окна и заголовок окна должны иметь свой идентификатор;
- Вставляем скрипт на страницу
Код<script type='text/javascript' src='elementmove.js'></script> - Для каждого окна создаем свой объект, вызывая move_div()
Кодobj_move1 = new move_div("идентификатор_окна","идентификатор_заголовка");
Например
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Перетаскиваемые окна</title>
<style type='text/css'>
body { margin:0px; padding:0px; font-family: verdana, sans-serif; font-size:12px; }
h1 { text-align:center; margin-top:10px; }
.div_okno { position:absolute; }
.div_zagol_okno { cursor:move;
background: url("./images/fon_left_zagol.gif") no-repeat;
font-weight:bold; color:#8CF4EF; }
.div_zagol_okno div { padding-left:10px; padding-right:10px;
background: url("./images/fon_right_zagol.gif") right top no-repeat; }
.div_zagol_okno div div { padding:3px; background:#7c9992 url("./images/fon_zagol.gif"); white-space:nowrap; }
.content_okno { padding:5px; background:#C0C0C0; }
#div_okno1 { top:80px; left:10px; width:200px; }
#div_okno2 { top:120px; left:300px; width:300px; }
</style>
</head>
<body>
<h1>Перетаскиваемые элементы на JavaScript</h1>
<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Заголовок окна
</div></div></div>
<div class="content_okno"><div>
Вы можете перетащить это окошко!
</div></div>
</div>
<div id="div_okno2" class="div_okno">
<div id="zagol_okno2" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div></div>
<script type='text/javascript' src='elementmove.js'></script>
<script type='text/javascript'>
obj_move1 = new move_div("div_okno1","zagol_okno1");
obj_move2 = new move_div("div_okno2","zagol_okno2");
</script>
</body>
</html>
Посмотреть работу данного скрипта можно на странице тут
- Статью добавил пользователь
- Категория
- Дата размещения 14.02.2009, просмотров 19108
Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
- нет
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
Молодцы!!!
Я не очень сильна в java script поэтому очень прошу мне помочь.