html5 drop更改drop项目的类

Question

我有一个div，我将它拖放到另一个div中。但是，我希望被删除的项目在被删除时更改它的类。我使用的是香草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中，我正在寻找一种方法来改变被删除的elements类。

Answer 1

一旦拥有了通过document.getElementById()获得的元素(el)，就可以按如下方式操作它的类：

要删除类，请执行以下操作：

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/