Drag'n'Drop-ный слой
Автор: Raid
Сайт: Rusforumz.com
Сейчас я (человек с псевдонимом Mike Megalol и ником raid) постораюсь рассказать как сделать Drag'n'Drop-ный слой.
Слой в HTML можно создать с помощью тегов <DIV> и <SPAN>:
<DIV id="simple">Перетащи меня!</DIV>
Итак начнем.
Начало нашего HTML документа:
<HTML>
<HEAD>
<TITLE>Drag'n'Drop</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT language="JavaScript">
Тут вроде все понятно(Начинаем HTML документ, начинаем HEAD, говорим тайтл, говорим кодировку, начинаем JavaScript).
Дальше ЯваСкрипт:
var DDob;
объявляем рабочию переменную.
function MD(id){
DDob=document.getElementById(id);
if(DDob.style.position!='absolute') DDob.style.position='absolute';
}
функция-хандлер на Нажатие кнопки мыши. Присваевает переменной элемент(слой), и объявляет стиль позиции абсолютным.
function MM(e){
var X,Y;
Функция-хандлер на Перемещение мыши. Обьявляем переменые(где курсор).
if(DDob){
если элемент есть, то есть на нем нажата мышь.
X=(typeof(e)=='object')? e.clientX : event.clientX;
Y=(typeof(e)=='object')? e.clientY : event.clientY;
присваеваем переменным расположение курсора. Кроссбраузернасть! поэтому так мудренно.
DDob.style.left=X+document.body.scrollLeft;
DDob.style.top=Y+document.body.scrollTop;
Перемещаем элемент в место курсора + скроллинг документа. Можно еще добавить или вычесть чтобы элемент был под курсором или далеко от него как хинт.
return false;
}
}
разрешаем перемещение. выходим из функции.
function MU(){
if(DDob){
DDob=null;
}
}
Функция-хандлер на Отпускания кнопки мыши. Обнуляет переменную, если он была.
document.onmouseup=MU;
document.onmousemove=MM;
Ставим хандлеры на документ.
</SCRIPT>
</HEAD>
<BODY>
Закрываем JavaScript, Закрываем HEAD, начинаем тело документа.
<DIV id="simple" style="cursor:move;" onmousedown="MD(this.id);">
Перетащи меня!
</DIV>
наш слой со стилем(курсор перемещения), идом для определения, хандлером.
</BODY>
</HTML>
Закрываем документ.
В итоге получим:
Всегда ваш raid.
