Когда мы создаем приложения, важно обеспечить максимальное удобство для пользователей. Один из подходов, который мы можем использовать, - это обновить информацию на веб-странице без фактической перезагрузки страницы. Это делается с помощью событий.
События - это события, которые могут происходить на веб-странице в зависимости от действий пользователя. Когда происходят эти события, браузер выдает сигнал, чтобы ответить определенным образом или выполнить определенное действие в ответ. Эти ответы реализуются с помощью прослушивателей событий. Есть несколько событий, которые могут произойти на веб-странице, например, когда кто-то нажимает кнопку или наводит курсор на определенный элемент. Мы сосредоточимся на событиях перетаскивания.
Перетаскиваемый
Прежде чем перейти к событиям, мы должны сначала сделать что-нибудь перетаскиваемое. Это может быть что угодно, если мы укажем, что тег контента можно перетаскивать. Мы сделаем изображение нашего приятеля Мэтта перетаскиваемым, установив для него значение true в файле HTML. Мы создали несколько тегов div с атрибутом класса под названием «слот» и установили идентификатор под названием «перетаскиваемый» для моего тега изображения. Слоты будут областями, куда мы можем перетащить наше изображение. Здесь мы обсудим 7 возможных событий перетаскивания, которые могут произойти.
// index.html <body> <div class="slot"> <img id="draggable" src="src/caughtmatt.jpg" draggable="true"> </img> </div> <div class="slot"></div> <div class="slot"></div <h3>Watch Me Count Hella Fast</h3> <p id="status">You're Awesome!</p> <p id="counter">0</p> </body>
Я также добавил к этим атрибутам немного CSS.
// stylesheet.css #draggable { width: 200px; height: 200px; text-align: center; background: white; margin-bottom: 10px; } .slot { display: inline-block; width: 200px; height: 200px; background: lightblue; text-align: center; margin-bottom: 10px; } p { margin-left: 70px; } h3 { text-decoration: underline; font-style: italic; margin-left: 70px; }
Перетащите
Событие drag
запускается, пока мы перетаскиваем что-то, что можно перетащить. Обычно функция обратного вызова пуста, но в этом случае мы увеличили счетчик на 1, пока перетаскиваем изображение. Мы также добавили параметр false
в наш прослушиватель событий, чтобы разрешить вызов preventDefault()
. Это присутствует во всех наших функциях в качестве подстраховки. Мы также инициализировали переменную под названием «перетаскивание» для дальнейшего использования.
let dragged; document.addEventListener("drag", dragFunc, false); function dragFunc() { const counter = document.querySelector('#counter'); let x = parseInt(counter.innerHTML); x = x+1; counter.innerHTML = x; };
Похоже, что наш счетчик работает, когда мы перетаскиваем изображение. Вероятно, нам следует каким-то образом изменить исходное положение изображения, чтобы указать, что оно перетаскивается. Давайте сделаем это на нашем следующем мероприятии.
Перетащите начало
Событие dragstart
похоже на событие перетаскивания, но срабатывает только в начале перетаскивания. Для изображений лучше установить более низкое значение непрозрачности, чтобы пользователь знал, что изображение перетаскивается в самом начале. Мы также установили нашу перетаскиваемую переменную равной event.target
, чтобы отслеживать изображение.
document.addEventListener("dragstart", dragStartFunc, false); function dragStartFunc() { dragged = event.target; dragged.style.opacity = 0.5; };
Слей это! Наша настройка непрозрачности работает, но остается неизменной после того, как мы отбрасываем изображение… мы должны это исправить.
Перетащите конец
Событие dragend
противоположно событию dragstart
. Он срабатывает, когда изображение отбрасывается и больше не перетаскивается. В нашем примере мы полностью сбросили прозрачность, чтобы изображение не оставалось с непрозрачностью 0,5.
document.addEventListener("dragend", dragEndFunc, false); function dragEndFunc() { dragged.style.opacity = 1; };
Перетащите над
Событие dragover
запускается, когда элемент все еще перетаскивается и еще не отпущен. Мы можем думать об этом как о том, как мусор можно выбросить в мусорное ведро, но еще не выбросить (не мусорить!). В этом случае мы не будем запускать какую-либо функцию, кроме preventDefault()
, позволяющую перетащить изображение в другое место. Это событие очень похоже на drag
.
document.addEventListener("dragover", dragOverFunc, false); function dragOverFunc() { event.preventDefault() };
Перетащите ввод
Событие dragenter
запускается, когда предмет входит в область, откуда его можно уронить. Это может сбивать с толку после того, как мы только что рассмотрели dragover
. Мы можем думать об этом как о нахождении рядом с мусорным баком, где мы можем выбросить наш мусор и не промахнуться.
Мы создали условие, чтобы при наведении курсора мыши на наш тег div с именем класса «слот» цвет фона менялся на зеленый. Мы также изменили текст в теге абзаца, чтобы обозначить «ввод».
document.addEventListener("dragenter", dragEnterFunc, false); function dragEnterFunc() { if (event.target.className == "slot") { event.target.style.background = "green"; const status = document.querySelector('#status'); status.innerHTML = "You're moving me there?!"; }; };
Перетащите оставить
Когда что-то входит, оно тоже может уйти. Перетаскивание - это противоположность перетаскиванию ввода и срабатывает, когда наше изображение покидает область, в которую можно войти. Мы сохранили простоту и сбросили фон вместе с некоторыми изменениями текста. Посмотрим, что у нас есть на данный момент.
document.addEventListener("dragleave", dragLeaveFunc, false); function dragLeaveFunc() { if (event.target.className == "slot") { event.target.style.background = ""; const status = document.querySelector('#status'); status.innerHTML = "Not there? Okay..."; }; };
Уронить
Наконец, у нас есть последнее событие drop
. Это означает, что мы поместили наше изображение в другой слот. Самая важная часть в нашем коде, помимо preventDefault()
, - это удаление изображения с исходного места и добавление его туда, где его нужно отбросить.
document.addEventListener("drop", dropFunc, false); function dropFunc() { event.preventDefault(); if (event.target.className == "slot") { event.target.style.background = ""; const counter = document.querySelector('#counter'); counter.innerHTML = 0; const status = document.querySelector('#status'); status.innerHTML = "SNAP BACK TO REALITY!"; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); }}
Теперь, когда мы знаем основы перетаскивания, давайте реализуем их в наших проектах!