Native HTML5 DND

https://stackoverflow.com/questions/10588607/tutorial-for-html5-dragdrop-sortable-list

by bizamajig

HTML

<ul>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Apples</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Oranges</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Bananas</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Strawberries</li>
</ul>

CSS

[draggable] {
    user-select: none;
}

body {
    background-color: #fff; 
    color: #303; 
    font-family: sans-serif; 
    text-align: center;
}

li {
    border: 2px solid #000;
    list-style-type: none;
    margin: 2px;
    padding: 5px;
}

ul {
    margin: auto;
    text-align: center;
    width: 25%;
}

JavaScript

var source;

function isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
        for (var cur = a; cur; cur = cur.previousSibling) {
            if (cur === b) { 
                return true;
            }
        }
    }
    return false;
} 

function dragenter(e) {
    if (isbefore(source, e.target)) {
        e.target.parentNode.insertBefore(source, e.target);
    }
    else {
        e.target.parentNode.insertBefore(source, e.target.nextSibling);
    }
}

function dragstart(e) {
    source = e.target;
    e.dataTransfer.effectAllowed = 'move';
}