javascript - 如何使用 JavaScript 获取掉落元素的类名？

Question

我的容器和元素很少。我想将一个项目拖到容器中并获取所拖放项目的类名。

获取类名非常简单 .className 但不起作用

这是我正在使用的一些代码(places[i] 是循环的一部分，因此为了澄清起见，我没有包含整个代码):

places[i].addEventListener('drop', function(e){
  console.log(this.childNodes[0].className  );
});

这不起作用，错误是“无法读取属性'className'”。我尝试了 this.childNodes 并得到:

[item: function]
  0: div.coins.blue
    ....
    className: "coins blue"
    ...

我确实尝试了 this.childNodes['item'] 记录了 function item() { [native code] }。不知道该去哪里

这是基本代码http://jsbin.com/wadavuci/1/edit?js,console,output

谢谢

Answer 1

使用拖放时，您必须在 dragstart 事件中手动设置要传输的数据。使用事件的 dataTransfer 对象的 setData() 成员设置数据:

for (var i=0; i<coins.length; i++) {
    coins[i].addEventListener('dragstart', function(e){
        e.dataTransfer.setData("text/plain", this.className);
    });
}

同样，必须在drop事件中读取传输的数据:

for (var i=0; i<places.length; i++) {   
    places[i].addEventListener('drop', function(e){
        console.log(e.dataTransfer.getData("text/plain"));
    });
    /* ... */
};

Native HTML5 Drag and Drop文章关于http://www.html5rocks.com/很好地介绍了如何处理拖放。