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);
Search WWH ::




Custom Search