Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Технология Drag & Drop

Источник: realcoding.net

В JavaScript нет встроенный событий Drag и Drop, которые поддерживаются многими языках программирования, но есть средства, с помощью которых данную технологию можно реализоватю.

Код скрипта:

<div style=position:relative; width:450px; height:125px; cursor:pointer>

<
img src=bear.jpg style=position:absolute; left:15px; top:10px
onmousedown=Move(this)>

<
div style=position:absolute; left:190px; top:10px; width:170px;
border: 1px solid; padding:5; text-align:left; background-color:white
onmousedown=Move(this)>
Этот компонент имеет постоянный размер.
</
div>

<
div style=position:absolute; left:380px; top:10px onmousedown=Move(this)>
Этот компонент не имеет постоянный размер.
</
div>

<
script type=text/javascript>
var
SelectedItem;
var
SelectedX, SelectedY;
var
MouseX, MouseY;

function
Move(ClickedItem)
{
SelectedItem = ClickedItem;
SelectedX = SelectedItem.style.pixelLeft;
SelectedY = SelectedItem.style.pixelTop;
MouseX = event.clientX;
MouseY = event.clientY;
document.onmousemove = Drag;
document.onmouseup = Drop;
}


function
Drag()
{
SelectedItem.style.left = SelectedX + (event.clientX - MouseX);
SelectedItem.style.top = SelectedY + (event.clientY - MouseY);
return
false;
}

function
Drop()
{
document.onmousemove = null;
document.onmouseup = null;
}

</script>

С компонентами все понятно. У нас есть одна картинка и 3 компонента DIV, причем один из них является контейнером для двух других и картинки.

Рассмотрим подробней код скрипт. При нажатии на картинку или текст возникает событие onmousedown, которое вызывает функцию Move(this). this - название объекта, который вызвал функцию (например img или div).

Глобальной переменной SelectedItem присваивается имя компоненты, которая вызвала функцию

SelectedItem = ClickedItem

определяются координаты положения данной компоненты

SelectedX = SelectedItem.style.pixelLeft
SelectedY
= SelectedItem.style.pixelTop

а также положение курсора мыши

MouseX = event.clientX
MouseY
= event.clientY

При этом document.onmousemove присваивается функция Drag, которая будет выполнятся всякий раз, когда пользователь нажмет клавишей мыши на какой то компонент (рисунок, текст), а document.onmouseup (при отпускании кнопки мыши) функция Drop.

Функция Drag рассчитывает новые координаты положения картинки или текста в зависимости от расположения указателя мыши:

SelectedItem.style.left = SelectedX + (event.clientX - MouseX)
SelectedItem.style.top = SelectedY + (event.clientY - MouseY)

Функция Drop удаляет соответствие событиям вызов определенных функций:

document.onmousemove = null
document
.onmouseup = null



Похожие статьи:
- Внедрение кода в объекты Flash
- Киберсквоттинг - Столбить имена
- Директор по креативу: менеджер или творец
- Сайт как рекламная площадка
- Счетчики рейтингов - неизбежное зло?
- PHP 6 на подходе
- Все о мета тегах
- Собираем Apache + PHP + XML для Linux.
- Третий тип XSS: Межсайтовый скриптинг через DOM
- Предзагрузка картинок
- Загрузка файлов на FTP
- Некоторые критерии выбора хостинга
- Защита от автоматической регистрации при помощи картинки


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]