В этой статье мы рассмотрим обработку событий 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.