Other JavaScript Libraries - Beginning JavaScript - page 514

var span = document.createElement("span");
return typeof span.draggable != "undefined";
});
Modernizr.load([{
test: Modernizr.draggable,
nope: "draggable‐polyfill.js"
},
{
test: document.addEventListener,
nope: "event‐polyfill.js",
complete: init
}]);
</script>
</body>
</html>
Save this as ch17 _ example1.html and load it into any browser (you can also view it
at http://beginningjs.com/examples/ch17 _ example1.html ). You'll see that it behaves
exactly like ch10 _ example21.html , and if you can view it in IE8, you'll see that it works
there, too.
This code is almost identical to ch10 _ example21.html , so let's just go over the new/changed code.
First, you add a reference to Modernizr:
<script src="modernizr.min.js"></script>
As recommended by the folks at Modernizr, the <script/> element resides within the document's
<head/> .
The next change is the addition of the init() function. The function itself is new, but the code it
executes is the same initialization code from ch10 _ example21.html :
function init() {
var draggable = document.querySelectorAll("[draggable]");
var targets = document.querySelectorAll("[data-drop-target]");
for (var i = 0; i < draggable.length; i++) {
draggable[i].addEventListener("dragstart", handleDragStart);
}
for (i = 0; i < targets.length; i++) {
targets[i].addEventListener("dragover", handleOverDrop);
targets[i].addEventListener("drop", handleOverDrop);
targets[i].addEventListener("dragenter", handleDragEnterLeave);
targets[i].addEventListener("dragleave", handleDragEnterLeave);
}
}
This code was wrapped within the init() function so that Modernizr can use it as the complete
callback function, therefore setting up the event listeners after the event‐polyfill.js file has been
completely loaded. This is crucial because if the event polyfill isn't ready, the page will not work in IE8.