Java Reference
In-Depth Information
var dropStatus = document.getElementById("dropStatus");
dropZone.addEventListener("dragenter", handleDragEnter);
</script>
</body>
</html>
Save this file as
ch10_example18.html
. Open it and you'll see something like Figure 10-5.
figure 10-5
Drag anything to the target. It can be selected text, a file on your computer, and so on. As your
mouse pointer enters the target, you'll see the text
You're dragging something!
appear on the
page. Figure 10-6 shows text being dragged over the drop zone in Chrome.
In this page, a
<div/>
element is used as the drop zone:
<div id="dropZone" class="drop-zone">Drop Zone!</div>
It has an
id
of
dropZone
and has the CSS class of
drop‐zone
. The CSS is unimportant from a functional
standpoint, but it does add visual clarity because it defines the area in which you can drop something.
The important stuff is in the JavaScript. First, you retrieve the drop target element by using the
document.getElementById()
method and listen for its
dragenter
event. You also retrieve the
<div/>
element with an
id
of
dropStatus
. You'll use it to display status messages during the drag operation:
var dropZone = document.getElementById("dropZone");
var dropStatus = document.getElementById("dropStatus");
dropZone.addEventListener("dragenter", handleDragEnter);