Чтобы разобраться с тем как реализовать Drag & Drop с помощью JavaScript, разберем простой пример. В качестве подопытного объекта будем использовать обычный div с текстом:
Но стоит так же иметь в виду, что на месте div мог быть рисунок, таблица, ссылка или любой другой элемент.Итак, чтобы в полной мере реализовать технологию передвижения объекта на web-странице нужно запрограммировать обработку следующих событий: mousedown, mousemove, mouseup.
Для реализации изложенного алгоритма понадобятся:
1) Глобальные переменные, в которых будет зафиксировано начальное положение элемента и начальные координаты мыши.
2) Функция определения текущих координат мыши.
3) Функция сохранения состояния объекта перед перемещением
4) Функция обработки перемещения
Теперь реализуем это в коде:
// Объявим глобальные переменные
// Переменная состояния, по умолчанию ничего не двигается = false
var moveState = false;
// задаем начальное положение мыши
var x0, y0;
// Начальные координаты элемента
var divX0, divY0;
// Выведем абсолютно-позиционированный DIV размером 50 * 50
// Зальем DIV черным цветом
// Добавим прямо в DIV обработчики событий
document.write(
"<div
style='position:absolute; top:0; left:0; background-color:black; width:50px; height:50px;'
onmousedown = 'initMove(this, event);'
onmouseup = 'moveState = false;'
onmousemove = 'moveHandler(this, event);'
></div>"
);
// Объявим функцию для определения координат мыши
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
return {x:x, y:y};
}
// Функция инициализации движения
// Записываем всё параметры начального состояния
function initMove(div, event) {
var event = event || window.event;
x0 = defPosition(event).x;
y0 = defPosition(event).y;
divX0 = parseInt(div.style.left);
divY0 = parseInt(div.style.top);
moveState = true;
}
// Если клавишу мыши отпустили вне элемента движение должно прекратиться
document.onmouseup = function() {
moveState = false;
}
// И последнее
// Функция обработки движения:
function moveHandler(div, event) {
var event = event || window.event;
if (moveState) {
div.style.left = divX0 + defPosition(event).x - x0;
div.style.top = divY0 + defPosition(event).y - y0;
}
}