Javascript 拖动事件只触发一次

我正在开发一种带有HTML5拖放api的益智游戏。我构建了一个3行的网格，每行4列，给我12个正方形。除一个方格外，所有方格都包含一些从1到11的数字。空方块是指放置区域，即任何方块都可以拖入其中

当拖动元素时，dataTransfer.setData被设置为被拖动元素的id，而ondrop事件使用dataTransfer.getData（）获取数据，其结果用于查询dom中被拖动的元素，然后克隆，之后dropzone现在被克隆的节点替换。拖动元素的来源也将替换为dropzone

var squares=document.querySelectorAll（“.item”）；
var dropzone=document.querySelector（“.col-lg-3.dropzone”）；
功能启动图（e）{
e、 dataTransfer.setData（“文本”，即target.id）；
console.log（例如target）
}
功能透支（e）{
e、 预防默认值（）；
e、 target.classList.toggle（“dropzone活动”）；
}
函数（e）{
e、 预防默认值（）；
e、 target.classList.toggle（“dropzone活动”）；
}
功能项目（e）{
e、 预防默认值（）；
var data=e.dataTransfer.getData（“文本”）；
var draggedElem=document.getElementById（数据）
var clone=draggedElem.cloneNode（真）；
var emptyzone=dropzone.cloneNode（假）；
emptyzone.className=“col-lg-3 dropzone”；
draggedElem.parentNode.replaceChild（emptyzone，draggedElem）；
clone.id=数据；
e、 target.parentNode.replaceChild（克隆，e.target）；
}
对于（var i=0；i您可以创建一个函数来设置
dropzone
变量，附加
dragover
，
dragleave
，
drop
事件到当前
dropzone
元素。在
drop
事件侦听器中调用函数，将
数据
附加到
dragstart
事件到当前具有的元素ode>id

数据

var squares=document.querySelectorAll（“.item”）；
无功区；
//=document.querySelector（“.col-lg-3.dropzone”）；
功能启动图（e）{
e、 dataTransfer.setData（“文本”，即target.id）；
}
功能透支（e）{
e、 预防默认值（）；
e、 target.classList.toggle（“dropzone活动”）；
}
函数（e）{
e、 预防默认值（）；
e、 target.classList.toggle（“dropzone活动”）；
}
功能项目（e）{
e、 预防默认值（）；
var data=e.dataTransfer.getData（“文本”）；
var draggedElem=document.getElementById（数据）
var clone=draggedElem.cloneNode（真）；
var emptyzone=dropzone.cloneNode（假）；
emptyzone.className=“col-lg-3 dropzone”；
draggedElem.parentNode.replaceChild（emptyzone，draggedElem）；
clone.id=数据；
e、 target.parentNode.replaceChild（克隆，e.target）；
setResetDND（数据）；
}
对于（变量i=0；i

#游戏区{
宽度：800px；
高度：500px；
背景色：rgba（0,0,0,5）；
保证金：0自动；
填充：15px；
位置：相对位置；
}
.项目，
.dropzone{
背景色：红色；
右边距：10px；
边缘底部：15px；
宽度：100px；
高度：100px；
字号：2em；
颜色：#fff；
文本对齐：居中；
}
.拖动活动{
位置：绝对位置；
z指数：10；
}
.dropzone处于活动状态{
边框：3倍白色虚线；
}
.dropzone{
背景色：rgba（255、255、255、.6）；
}

1.
3.
2.
4.
5.
6.
9
7.
8.
11
10

Perfect。这是可行的。但是，我仍然无法理解它为什么/如何工作以及我的代码为什么不工作。@ibnhamza“现在的问题是，第一次拖放操作是成功的，但是，尝试在新的dropzone中拖动新元素不起作用，它只是不再识别ondragenter、ondragleave、ondragover和拖放事件。”请参阅“克隆节点复制其所有属性及其值，包括内在属性（串联）监听器。它不会复制使用

addEventListener（）

添加的事件监听器或分配给元素属性的事件监听器。解释得很好。谢谢