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

add and remove a CSS class like in the earlier example so that you could easily add more
styles in the future. For brevity we'll leave it as is in this example.
The dragOverHandler() function does the real work in this example:

…
function dragOverHandler(e) {
// make sure the item being dragged isn't the
same as the one we're dragging over
// and make sure it hasn't been removed from the

page

if (dragging != e.target && dragging.parentNode

!= null)

{

// determine whether the drag in going

up or down

if ( e.target.previousElementSibling
== dragging ) dir = "down";
else dir = "up";

// remove the item being dragged from

the page

drag-
ging.parentNode.removeChild(dragging);
// add item being dragged above
or below the item being dragged over
if (dir == "down"){
dragging =

e.target.parentNode.appendChild(dragging , e.target);
}
else if (dir == "up")
dragging =

e.target.parentNode.insertBefore(dragging , e.target);
}
// prevent the default behavior
if (e.preventDefault) e.preventDefault();
return false;

}