Когда мы создаем приложения, важно обеспечить максимальное удобство для пользователей. Один из подходов, который мы можем использовать, - это обновить информацию на веб-странице без фактической перезагрузки страницы. Это делается с помощью событий.

События - это события, которые могут происходить на веб-странице в зависимости от действий пользователя. Когда происходят эти события, браузер выдает сигнал, чтобы ответить определенным образом или выполнить определенное действие в ответ. Эти ответы реализуются с помощью прослушивателей событий. Есть несколько событий, которые могут произойти на веб-странице, например, когда кто-то нажимает кнопку или наводит курсор на определенный элемент. Мы сосредоточимся на событиях перетаскивания.

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

Прежде чем перейти к событиям, мы должны сначала сделать что-нибудь перетаскиваемое. Это может быть что угодно, если мы укажем, что тег контента можно перетаскивать. Мы сделаем изображение нашего приятеля Мэтта перетаскиваемым, установив для него значение 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 );
}}

Теперь, когда мы знаем основы перетаскивания, давайте реализуем их в наших проектах!