问题描述
我目前正在使用本机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';
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）