HTML and CSS Reference
In-Depth Information
</body>
</html>
Edit the JavaScript file named script.js in the dnd_list/js directory. This
script will use four functions, init() , dragStartHandler() , dragOverHand-
ler() , and dragEndHandler() . First create the global variables and edit the
init() function:
// define global variables
var dragging;
// the list item being dragged
var dir;
// the direction (up or down) the
drag is going in
function init() {
var li = document.getElementsByTagName("li");
// loop through list and make items draggable and
set the event handler functions
for ( var i = 0; i < li.length; i++ )
{
li[i].draggable = true;
li[i].ondragover = dragOverHandler;
li[i].ondragstart = dragStartHandler;
li[i].ondragend = dragEndHandler;
}
}
This example differs from the previous one in that the draggable attribute value is
being added from the script. The script retrieves a reference to all list item elements on
the page and adds the ability for them to be swapped around.
Continue with the script:
function dragStartHandler(e) {
dragging = e.target;
e.dataTransfer.setData('text/plain' , null);
dragging.style.opacity = "0.5";
}
The dataTransfer object is set here but to a value of null because we're not us-
ing a payload. It just needs to be set to allow the dragover event to fire in Chrome.
We're setting the CSS opacity property here too, although it would be advisable to
Search WWH ::




Custom Search