スマホ対応の超軽量VanillaなJavaScriptドラッグ＆ドロップ

HTML5の標準でDrag&Dropが実装されましたので、jQueryなどを使わなくてもドラッグ＆ドロップが簡単に実現できるようになりました。
しかしマウスイベントのみという状況なので、iPhoneなどのマウスを使わない、TouchイベントのデバイスではjQueryに頼っているという人も多いと思います。

jQueryやプラグインを使用しなくても、以下の様なVanillaの簡単なコードでリストの並び替えができます。

HTMLコード

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

JavaScriptコード

var lis = document.querySelectorAll('li');
var draggingItem;
[].forEach.call(lis, function(li){
    li.setAttribute('draggable', true);
    li.addEventListener('touchstart', function(e){
        draggingItem = li;
    });
    li.addEventListener('touchend', function(e){
        draggingItem = null;
    });
    li.addEventListener('touchmove', function(e){
        e.preventDefault();
        var getOrder = function(elem){
            return [].indexOf.call(elem.parentNode.children, elem);
        }
        var pointedElement = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
        if(!pointedElement.getAttribute('draggable') || pointedElement == draggingItem) return;
        var order = getOrder(pointedElement) - getOrder(draggingItem);
        if(order > 0) {
            pointedElement.parentNode.insertBefore(pointedElement, draggingItem);
        } else if (order < 0) {
            pointedElement.parentNode.insertBefore(draggingItem, pointedElement);
        }
    });
});

実際に動くデモは以下に置いています。
デモ