Drag and drop HTML elements

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drag and Drop API</title>    
</head>
<body>
    <header>
        <h1>Drag and drop HTML elements</h1>
    </header>
    <article>
        <ul>
            <li draggable="true">
                <label for="txtA">Label A</label><input type="text" placeholder="Texbox A" /></li>
            <li draggable="true">
                <label for="txtB">Label B</label><input type="text" placeholder="Texbox B" /></li>
            <li draggable="true">
                <label for="txtC">Label C</label><input type="text" placeholder="Texbox C" /></li>
            <li draggable="true">
                <label for="txtD">Label D</label><input type="text" placeholder="Texbox D" /></li>
            <li draggable="true">
                <label for="txtE">Label E</label><input type="text" placeholder="Texbox E" /></li>
            <li draggable="true">
                <label for="txtF">Label F</label><input type="text" placeholder="Texbox F" /></li>
        </ul>
        <ul>
            <li draggable="true">
                <label for="txtG">Label G</label><input type="text" placeholder="Texbox G" /></li>
            <li draggable="true">
                <label for="txtH">Label H</label><input type="text" placeholder="Texbox H" /></li>
            <li draggable="true">
                <label for="txtI">Label I</label><input type="text" placeholder="Texbox I" /></li>
            <li draggable="true">
                <label for="txtJ">Label J</label><input type="text" placeholder="Texbox J" /></li>
            <li draggable="true">
                <label for="txtK">Label K</label><input type="text" placeholder="Texbox K" /></li>
            <li draggable="true">
                <label for="txtL">Label L</label><input type="text" placeholder="Texbox L" /></li>
        </ul>
    </article>    
</body>
</html>

CSS

body {
    font-family: "Verdana";
    font-size: 9pt;
}

header {
    padding: 15px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    background-color: rgb(27, 161, 226);
    color: #fff;
}

    header h1 {
        font-size: 14pt;
    }


article {
    width: 90%;
    margin: auto;
    margin-top: 20px;
}

ul {
    list-style-type: none;
    float: left;
}

li label {
    float: left;
    width: 7.5em;
    height: 1.7em;
    font-size: 90%;
    line-height: 20px;
}

/*DnD styles*/

ul input:hover {
    border: 2px solid #C6C6C6;
}

section ul li input:first-child {
}

section ul li input:last-child {
    margin: 5px;
}


.clear {
    clear: both;
}


/*DnD styles*/

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

ul li[draggable=true] {
    cursor: move;
}

    ul li[draggable=true]:hover {
        border: dashed 1px rgb(27, 161, 226);
    }

.moving {
    opacity: 0.25;
    border: dashed 1px red;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}

.over {
    border: 2px dashed #000;
}

JavaScript

var HTML5 = HTML5 || {};

HTML5.DnD = function() {
    //private members
    var dragSrcEl = null,
        draggables = null,

        init = function(selector) {

            draggables = document.querySelectorAll(selector);

            //Set listeners
            [].forEach.call(draggables, function(elem) {
                elem.addEventListener("dragstart", dragStart, false);
                elem.addEventListener("drag", drag, false);
                elem.addEventListener("dragenter", dragEnter, false);
                elem.addEventListener("dragover", dragOver, false);
                elem.addEventListener("dragleave", dragLeave, false);
                elem.addEventListener("drop", drop, false);
                elem.addEventListener("dragend", dragEnd, false);
            });

        },
        dragStart = function(e) {
            e.dataTransfer.effectAllowed = 'move';
            //e.dataTransfer.setData('text/html', this.innerHTML);
            e.dataTransfer.setData('text', this.innerHTML);
            dragSrcEl = this;
            this.className = this.className.replace("target", "");

        },
        drag = function(e) {
            this.className += ' moving';
        },
        dragOver = function(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }

            e.dataTransfer.dropEffect = 'move';
            this.className += " over";


        },
        dragEnter = function() {
            this.className += " over";
        },
        dragLeave = function() {
            this.className = "";
        },
        drop = function(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }

            if (dragSrcEl != this) {
                dragSrcEl.innerHTML = this.innerHTML;
                //this.innerHTML = e.dataTransfer.getData('text/html');
                this.innerHTML = e.dataTransfer.getData('text');
            }

            return false;
        },
       ...