Корзина товаров drag n drop

Question

Всем привет! Необходимо реализовать метод для события drop. Есть примерно такая структура:

<div class="droparea"></div>
<div class="cart__lits">
  <div class="cart__item">
    <p>Some content</p>
  </div>
</div>

Начинаю работать с JS, мне всего лишь нужно когда элемент cart__item находится над droparea срабатывал уже написанный метод, допустим addToCart(). И когда задействую события:

document.addEventListener(`dragover`, (evt) => {
    addToCart()
})

Но срабатывает этот метод по 100500 раз... Что мне делать. Уточню что карточка товара наполнена стандартным контентом, типо картинки тайтла цены, мне нужно что бы само событие срабатывало именно на главном родителе карточки. А итог падал в дроп ареа, просто вызывая определенный метод один раз, так же как мы нажимаем на кнопку. Есть идеи, а то у меня уже мыслей нет почему такая вроде простая тема не работает...

Answer 1

Событие "dragover" срабатывает каждые 100 миллисекунд, когда вы держите элемент cart_item над корзиной. В связи с этим метод срабатывает 100500 раз.

Для того, чтобы метод вызывался один раз - используйте событие "drop" вместе с "dragover".

document.addEventListener('dragover', function(event) {
     event.preventDefault();
});
document.addEventListener('drop', function(event) {
     event.preventDefault();
     addToCart();
});

БЛОГ НА HUSL

Корзина товаров drag n drop

Ответы (1 шт):