Перетаскивание и масштабирование элемента

К анимации относят также возможность изменения положения элемента документа HTML, когда курсор мыши перемещает элемент при нажатой левой клавише мыши – перетаскивание элемента или технология drag and drop.

Для реализации перетаскивания элементов необходимо определить эти элементы (или их родителей) как абсолютно позиционированные и задать глобальную переменную для хранения перетаскиваемого элемента (этой переменной присваивается значение null).

При нажатии клавиши мыши над перетаскиваемым элементом (событие mousedown) необходимо выполнить следующие действия:

· Определить источник события (в Internet Explorer свойство srcElement объекта event) или мишень (в DOM – свойство target объекта события);

· Если была нажата левая кнопка мыши (значение свойства button события равно 1 для Internet Explorer или 0 для DOM) и источник (мишень) события – один из перетаскиваемых элементов (определяемых обычно по значению атрибута id), присвоить элемент глобальной переменной для хранения перетаскиваемого элемента.

При перемещении мыши (событие mousemove), если нажата левая кнопка мыши и существует элемент для перетаскивания, т.е. значение глобальной переменной для хранения перетаскиваемого элемента не равно null, необходимо определить свойства clientX и clientY события event, значением которых являются текущие координаты курсора мыши. Затем необходимо присвоить эти значения свойствам left и top перетаскиваемого элемента и запретить "всплывание" события (чтобы событие не достигло обработчиков событий элемента, расположенных выше по иерархической лестнице). Это выполняется в Internet Explorer присваиванием значения true свойству cancelBubble объекта event, а в DOM – вызовом метода stopPropagation() для объекта события. Необходимо также запретить обработку события по умолчанию, которое в противном случае могло бы выполняться сразу после обработки данного события. Для этого в Internet Explorer свойству returnValue объекта event присваивается значение false, а в DOM – вызывается метод preventDefault() для объекта события.

При отпускании кнопки мыши (событие mouseup) необходимо вновь присвоить глобальной переменной для хранения перетаскиваемого элемента значение null.

Можно также изменять размеры абсолютно позиционированных элементов, т.е. выполнять их масштабирование. Для этого, наряду со свойствами left и top элемента необходимо также изменять значения свойств width и height на величины перемещения курсора мыши по вертикали и горизонтали. При этом надо учитывать, что для свойства left перемещение курсора вправо уменьшает ширину элемента, а перемещение влево – увеличивает; для свойства top перемещение курсора вверх увеличивает высоту элемента, а перемещение вниз – уменьшает.

Пример 4.5.69. Перетаскивание и масштабирование элементов:

1. Перетаскивание элементов документа (технология drag and drop)

Просмотр примера: Example4-5-69-1.html

Текст документа HTML: Example4-5-69-1

2. Изменение размеров элементов документа с помощью перетаскивания:

Просмотр примера: Example4-5-69-2.html

Текст документа HTML: Example4-5-69-2