User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 321

</section>
</body>
</html>
This HTML page creates two sections, one that has its draggable attribute set to
true and one to false (this could be left off, but I included it to explicitly differenti-
ate the two). Each has an ID that will be referenced in the JavaScript for the page.
Now edit the linked CSS file, styles.css (in the dnd/css directory). We will
take the sections and create two black-bordered boxes that are arranged side by side:
section {
width:200px;
padding:10px;
background-color:#cccccc;
border:1px solid #000000;
float:left;
margin-right:4px;
text-align:center;
}
Lastly, edit script.js (in the dnd/js directory) and write the following script:
// global variable to hold reference to the two sections on
the page
var draggable;
var droptarget;
// initialize variable values and set event handling func-
tions
function init() {
draggable = document.getElementById( "draggable"
);
droptarget = document.getElementById( "droptar-
get" );
draggable.ondragstart = dragStartHandler;
draggable.ondrag = dragHandler;
draggable.ondragend = dragEndHandler;
droptarget.ondragenter = dragEnterHand-