スマホ対応の超軽量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);
		}
	});
});

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