为国际象棋创建拖放

Question

我目前正在使用本机Javascript开发国际象棋应用程序。我已经准备好所有内容，并决定尝试仅使用本机Javascript进行拖放功能，但是我无法获得drop事件监听器，因此我在这里看看是否可以找到一些帮助。

如果我的构建方式正确，则应该可以将img拖放到另一个正方形，但是正如我所说的那样，drop事件没有触发，所以现在我不确定我的语法正确。

document.querySelectorAll('img').forEach(function(el) {
    el.className += 'piece'

})
document.querySelectorAll('.white' && '.black').forEach(function(el) {
    
    el.addEventListener('drop', drop_handler, false)
})

document.querySelectorAll('.piece').forEach(function(el) {
    el.addEventListener('dragstart', dragstart_handler,false)
    el.addEventListener('dragover', dragover_handler,false)

})

function dragstart_handler(ev) {
    console.log('dragstart')
    this.style.opacity = '0.4';

    dragSrcEl = this;
    console.log(dragSrcEl)
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData('text/html', this.innerHTML);


}
function dragover_handler(ev) {
    console.log('dragover')
    this.style.opacity = '1';
    ev.dataTransfer.dropEffect = 'move';
    return false
}
function drop_handler(ev) {
    console.log('drop')
    ev.stopPropagation();

    if (dragSrcEl !== this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = ev.dataTransfer.getData('text/html');
    }

    e.dataTransfer.dropEffect = 'move';
    
}