В JavaScript нет встроенный событий Drag и Drop, которые поддерживаются многими языках программирования, но есть средства, с помощью которых данную технологию можно реализоватю.
function Drop() { document.onmousemove = null; document.onmouseup = null; }
</script>
С компонентами все понятно. У нас есть одна картинка и 3 компонента DIV, причем один из них является контейнером для двух других и картинки.
Рассмотрим подробней код скрипт. При нажатии на картинку или текст возникает событие onmousedown, которое вызывает функцию Move(this). this - название объекта, который вызвал функцию (например img или div).
Глобальной переменной SelectedItem присваивается имя компоненты, которая вызвала функцию
SelectedItem = ClickedItem
определяются координаты положения данной компоненты
При этом document.onmousemove присваивается функция Drag, которая будет выполнятся всякий раз, когда пользователь нажмет клавишей мыши на какой то компонент (рисунок, текст), а document.onmouseup (при отпускании кнопки мыши) функция Drop.
Функция Drag рассчитывает новые координаты положения картинки или текста в зависимости от расположения указателя мыши: