Как сделать проверку на активный класс js?

Question

[ssawyer]

Есть код с драг дропом

spoiler

const dragItems = document.querySelectorAll('.dragitem');
const dropZones = document.querySelectorAll('.dropzone');

const benefitsTitle = document.querySelector('.benefits__text-title');
const benefitsText = document.querySelector('.benefits__text-desc');


// const dragImages = document.querySelectorAll('.img-js');
// console.log(dragImages)

// Обход цикла для айтемов
dragItems.forEach((dragItem) => {
    dragItem.addEventListener('dragstart', handlerDragstart);
    dragItem.addEventListener('dragend', handlerDragend);
    dragItem.addEventListener('drag', handlerDrag);
});
// Обход цикла для зон сброса
dropZones.forEach((dropZone) => {
    dropZone.addEventListener("dragenter", handlerDragenter);
    dropZone.addEventListener("dragleave", handlerDragleave);
    dropZone.addEventListener("dragover", handlerDragover);
    dropZone.addEventListener("drop", handlerDrop);
});

// dragImages.forEach((dragImage) => {
//     dragImage.addEventListener("click", handlerClick);
// });



function handlerDragstart(event) {
    event.dataTransfer.setData("dragItem", this.dataset.item);



    
    this.classList.add("benefits__item-active");



    event.dataTransfer.effectAllowed = "copy";


}

function handlerDragend(event) {
    // this.classList.remove("benefits__item-active");
}

function handlerDrag(event) {

}

function handlerDragenter(event) {
    event.preventDefault();
    this.classList.add("benefits__center--active");
}

function handlerDragleave(event) {
    this.classList.remove("benefits__center--active");
}

function handlerDragover(event) {
    event.preventDefault();
}

function handlerDrop(event) {
 document.querySelector('.dropzone').innerHTML = '';


    const dragFlag = event.dataTransfer.getData("dragItem");
    const dragItem = document.querySelector(`[data-item="${dragFlag}"]`);


    const titleFlag = dragItem.getAttribute('data-title');
    const textFlag = dragItem.getAttribute('data-text');
    console.log(titleFlag, textFlag)


   benefitsTitle.setAttribute('data-title', titleFlag);
   benefitsText.setAttribute('data-text', textFlag);
   benefitsTitle.innerText

    this.classList.remove("benefits__center--active");

    const clone = dragItem.cloneNode(true)
    this.append(clone);


}

Когда беру элемент dragItem ему присваивается класс benefits__item-active.
Но как сделать так, чтобы когда я беру курсором другой, то на предыдущем класс пропадал, а на текущем присваивался?
Сейчас присваивается всем элементам, которые беру в курсор

Answer 1

[ssawyer]

Решение проще простого

const actives = document.getElementsByClassName('benefits__item-active');

function handlerDragstart(event) {
    event.dataTransfer.setData("dragItem", this.dataset.item);

    // this.classList.add("benefits__item-active"); 

    const currentActive = actives[0];

    if (currentActive)
      currentActive.classList.remove("benefits__item-active");

    if (currentActive !== this)
      this.classList.add("benefits__item-active");


    event.dataTransfer.effectAllowed = "copy";


}