使用JavaScript拖放HTML5

Question

我想拖放box1，box2，box3，box4，但它无法正常工作。我认为JavaScript函数有问题。我可以知道我可以添加或更改什么来使盒子拖拽并且可以放下吗？

一切都在php文件中。

在html里面

<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)"> 
<div class="mover" draggable="true" ondragstart="dragWord(event)"></div> 
</div>
<br>
</br>
<div id="box2" ondragover="event.preventDefault()" ondrop="dropWord(event)"> 
<div class="mover" draggable="true" ondragstart="dragWord(event)"> </div> 
</div>
<br>
</br>
<div id="box3" ondragover="event.preventDefault()" ondrop="dropWord(event)"> 
<div class="mover" draggable="true" ondragstart="dragWord(event)"></div> 
</div>
<br>
</br>
<div id="box4" ondragover="event.preventDefault()" ondrop="dropWord(event)"> 
<div class="mover" draggable="true" ondragstart="dragWord(event)"></div> 
</div>
<br>
</br>

在JavaScript中。

{

document.getElementById("box1").innerHTML=""+shuffling[0];
document.getElementById("box2").innerHTML=""+shuffling[1];
document.getElementById("box3").innerHTML=""+shuffling[2];
document.getElementById("box4").innerHTML=""+shuffling[3];

}

function allowDrop(ev){
ev.preventDefault();
}
function dragWord(dragEvent){
dragEvent.dataTransfer.setData("Text", 

dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}

function dropWord(dropEvent){ 
var dropData = dropEvent.dataTransfer.getData("Text"); 
var dropItems = dropData.split("|"); 
var prevElem = document.getElementById('body'); 
prevElem.getElementsByTagName('head')[0].textContent = dropEvent.target.textContent; 
dropEvent.target.textContent = shuffling[0]; 
dropEvent.preventDefault(); 
}