Events - Beginning JavaScript - page 323

var dropStatus = document.getElementById("dropStatus");
dropZone.addEventListener("dragover", dragDropHandler);
dropZone.addEventListener("drop", dragDropHandler);
</script>
</body>
</html>
Save this file as ch10_example19.html , and open it. Your web page will look like Figure 10-7.
figure 10-7
Drag the red box over the target element, and you'll see the text of the status element change to
You're dragging over the drop zone! Drop the element in the drop zone, and the status text will
change to You dropped something!
There is one exception, however: Firefox will not let you drag the red box, but it will let you drop
objects from other sources (such as text, files on the filesystem, and so on). We'll explain why later.
The CSS of this example defines three classes. You've already seen the drop‐zone class, and the box
and red classes are extremely simple:
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}