webew
Войти » Регистрация
 
JavaScript :: Координаты, размеры, ресайз, drag_and_drop

Drag & Drop силами JavaScript

5 декабря 2007, 18:38
Пишем скрипт, с помощью которого можно передвигать элементы на web-странице.

Перед тем как взяться за JavaScript проведем простое планирование и ответим на 2 вопроса:
• Что мы будем передвигать?
• Как мы будем передвигать?

Ответ на вопрос «Что?» крайне прост: любой абсолютно (или относительно) позиционированный элемент на странице, например DIV: <div style='position:absolute; top:0; left:0'>Text in DIV</div>
На месте DIV-а мог быть рисунок, таблица, ссылка или любой другой элемент.

Ответ на вопрос «Как?» более сложен. Составим простой алгоритм «перетаскивания» любого элемента
1. Для начала нужно «ухватиться» за элемент, что соответсвует событию mousedown.
2. Затем элемент начинают передвигать, что соответствует событию mousemove.
3. Когда наш объект оказался на нужном месте его «отпускают» - событие mouseup.
4. Если резко переместить указатель мыши и отпустить вне объекта, то движение тоже должно остановиться – событие mouseup вне элемента.

Для реализации этого алгоритма в жизнь нам понадобятся:
1) Глобальные переменные показывающие начальное положение элемента, начальные координаты мыши и состояние движение.
2) Функция для определения координат мыши.
3) Функция «запоминания» начального состояния перед движением
4) Функция для обработки движения
Соберем всю эту теорию в JavaScript-сценарий:

// Объявим глобальные переменные
// Переменная состояния, по умолчанию ничего не двигается = 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;
    }
}


Это один из простейший способов реализации Drag&Drop силами JavaScript. Этот сценарий можно улучшить, избавивившись от глобальных переменных, перенеся добавление обработчиков событий из атрибутов тега в JavaScript и многое, многое другое... Главное, чтобы код не потерял свою ясность и работал также быстро. Удачи!


// Все права на статью JavaScript::Drag & Drop силами JavaScript принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
© 2008—2024 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: