html5 drop изменить класс удаляемого элемента

Question

У меня есть div, который я перетаскиваю внутри другого div. Тем не менее, я хочу, чтобы уроненный предмет менял свой класс при его уроне. Я использую vanilla js для этого, поэтому не отвечайте на jquery, пожалуйста.

function dragThis(e){
    e.dataTransfer.setData("Div", e.target.id);
}

function allowDrop(e) {
    e.preventDefault();
}

function drop(e){
    e.preventDefault();
    var data = e.dataTransfer.getData("Div");
    e.target.appendChild(document.getElementById(data));
}

Итак, в функции drop я ищу способ изменить класс отброшенных элементов.

Answer 1

Получив элемент (el), который вы получаете document.getElementById(), вы можете управлять его классом следующим образом:

Чтобы удалить класс:

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

Чтобы добавить класс:

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

Код взят здесь: http://youmightnotneedjquery.com/