В этой статье мы рассмотрим обработку событий mousedown, mousemove, mouseup, которые чаще всего применяют при перетаскивании элементов. Кроме эти событий, для перетаскивания существуют еще другие обработчики.

Обработка события onmousemove

При перемещении мыши по экрану или внутри какого-то html-элемента наступает событие mousemove. Его обработчик onmousemove предполагает, что вы можете получить координаты курсора мыши относительно открытого окна, html-страницы или элемента. Для этого нужно использовать свойства объекта Event. Чаще всего применяются свойства clientX и clientY, которые возвращают координаты курсора мыши по горизонтали и по вертикали относительно левого верхнего угла клиентской области браузера.

Пример ниже как раз и демонстрирует координаты курсора мыши clientX и clientY  при обработке события onmousemove. Вы можете их увидеть при перемещении курсора мыши. Кроме того, слушатель события mousemove позволяет отобразить при наведении на текст изображение с помощью css-свойства clip-path.

See the Pen Clipped Image Reveal on Hover by Elen (@ambassador) on CodePen.

В этом примере координаты курсора мыши связаны с css-свойством transform и css-переменными.

В примере ниже вы найдете использование обработки события mousemove и координат pageX и pageY для изменения жирности шрифта при перемещении мыши.

See the Pen Variable Font Effect by Fuzionix (@fuzionix) on CodePen.

Еще один пример с обработкой события onmousemove показывает изменение положения изображения в зависимости от координат мыши.

See the Pen The Boxer: Cheap Parallax by Dudley Storey (@dudleystorey) on CodePen.

Еще один пример обработки события onmousemove вы найдете в отдельной статье.

Обработка события onmousedown

В отличие от события click (или обработчика события onclick) событие mousedown и его обработчик onmousedown наступают при нажатии левой клавиши мыши. Таким образом, mousedown входит в событие click, но при этом нужно учитывать, что левую кнопку мыши вы (или другой пользователь) нажали и не отпустили.

В примере ниже мы используем событие onmousedown для того, чтобы назначить временной интервал для сворачивания или разворачивания блока при нажатии на кнопку с крестиком. За счет того, что на кнопку привязана анимация, которая длится порядка секунды, пользователю недостаточно просто кликнуть на кнопке. Нужно нажать левую кнопку мыши и не отпускать ее до тех пор, пока не закончится анимация.

See the Pen mousedown-mouseup by Elen (@ambassador) on CodePen.

Обработчик события onmouseup здесь используется для очистки таймаута.

Еще один пример использования события mousedown - это добавление анимации в canvas. Просто кликните в любом месте примера, чтобы увидеть эффект.

See the Pen Color Changin' by Alex Zaworski (@alexzaworski) on CodePen.

 

Обработка события onmouseup

Событие onmouseup происходит при отпускании левой кнопки мыши. Можно сказать, что это событие входит в состав события click, как бы завершая его.  В качестве примера мы рассмотрим процесс выделения текста при обработке этого события. Одновременно происходит изменение фонового цвета для body, так как выделенный текст представляет собой цвет в 16-ричном формате.

See the Pen Color Scheme onmouseup by Elen (@ambassador) on CodePen.

Еще один аналогичный пример выдает нам диалоговое окно с выделенным текстом. Код в нем использует библиотеку jQuery.

See the Pen Select Text And Share by Himalaya Singh (@singhimalaya) on CodePen.

Обработка событий mousedown, mousemove, mouseup для перетаскивания объектов

Обычно совместная обработка событий mousedown, mousemove, mouseup выполняется в том случае, если необходимо перетаскивать какой-либо элемент.

В примере ниже мы используем все эти события для перемещения фотографий с помощью курсора мыши. Причем при обработке события onmousedown мы определяем, что у нас есть некая перетаскиваемая фотография (scrollItem = true), а также рассчитываем расстояние от курсора мыши до верхнего левого угла фотографии с помощью данных, возвращаемых методом getBoundingClientRect(). Обработчик события  onmouseup нужен только для того, чтобы указать, что мы закончили перетаскивать объект (scrollItem = false).

В момент обработки события onmousemove мы рассчитываем координаты left и top для перетаскиваемой фотографии относительно курсора мыши, поскольку каждая фотография у нас имеет абсолютное позиционирование.

See the Pen mousedown, mousemove, mouseup by Elen (@ambassador) on CodePen.

Еще один пример перетаскивания, но уже всего контента для объекта window с пояснениями.

See the Pen Javascript click and drag scroll by Josh Parrett (@JTParrett) on CodePen.

 

Примеры обработки событий mousedown, mousemove, mouseup

Перетаскивание блока.

See the Pen Draggable Element by Elen (@ambassador) on CodePen.

Изменение положения объекта при наведении курсора мыши. Автор BurmesePotato

See the Pen Mustard Shadow by Burmese Potato (@BurmesePotato) on CodePen.

Изменение поворота карточек при наведении на них.

See the Pen Untitled by Elen (@ambassador) on CodePen.

Изменение градиента и трансформация блока.

See the Pen JS 3D Animation by Elen (@ambassador) on CodePen.

Пример обработки события mousemove для получения интерактивного градиента

See the Pen Interactive Gradient & Glassmorphism with noise by TOMAZKI (@Podgro) on CodePen.

Пример рисования текстом в canvas

See the Pen Drawing with text by Tim Holman (@tholman) on CodePen.

 

Перетаскиваемые слайдеры

See the Pen Draggable slider by Elen (@ambassador) on CodePen.

Перетаскиваемый слайдер с управлением стрелками.

See the Pen Draggable Image Slider by Elen (@ambassador) on CodePen.

И еще один перетаскиваемый слайдер с параллакс-эффектом:

See the Pen Slider Parallax Effect by Manuel Madeira (@mmadeira) on CodePen.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *