Технология 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