Understanding the Gravity of HTML5 - Learn HTML5 by Creating Fun Games - page 162

<ul>
<li draggable="true" class="block"
ondragstart="doOnDragStart(event)"
data-name="Block 1">Block #1</li>
</ul>
Just this step alone will make those elements all draggable. Of course, that isn't of
any use unless we have a place to drop those elements. Believe it or not, we actu-
ally can drop a dragged element anywhere. The problem is that we don't have any
code in place to handle the event of something being dropped. We can register such
events on any element, including the body tag, for example. This is shown in the fol-
lowing code:
document.body.ondragover = doOnDragOver;
document.body.ondragleave = doOnDragLeave;
document.body.ondrop = doOnDrop;
function doOnDragOver(event) {
event.preventDefault();
document.body.classList.add("dropme");
}
function doOnDragLeave(event) {
event.preventDefault();
document.body.classList.remove("dropme");
}
function doOnDrop(event) {
event.preventDefault();
document.body.classList.remove("dropme");
var newItem = document.createElement("li");
newItem.setAttribute("draggable", true);
newItem.classList.add("block");
document.querySelector("ul").appendChild(newItem);
}