Главная » Полезные статьи » Язык JavaScript » Технология Drag & Drop
Распечатать статью

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

В 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

Источник:  internet-technologies.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи