HTML and CSS Reference
In-Depth Information
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 {
border:1px solid #000000;
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-
function init() {
draggable = document.getElementById( "draggable"
droptarget = document.getElementById( "droptar-
get" );
draggable.ondragstart = dragStartHandler;
draggable.ondrag = dragHandler;
draggable.ondragend = dragEndHandler;
droptarget.ondragenter = dragEnterHand-
Search WWH ::

Custom Search