dnd api 実装

html5のドラッグアンドドロップね

とかくここが断トツで分かりやすい。そして、それでも良く読まないと分からない
ネイティブ HTML5 ドラッグ＆ドロップ - HTML5 Rocks

で、ここの通りやっても、IEは動かない。それは、

e.dataTransfer.setData('text/html', this.innerHTML);

htmlは、保存できない。なもんで、textにしなくちゃいけない。
javascript - dataTransfer.setData does not work in IE9 - Stack Overflow

そして、みんな大好きjqueryを利用する場合は、dataTransferをオリジナルの利用するよって伝えないといけないので、

e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);

こんな感じになる。

妄想サンプル

<ul class="lists" dropzone="move">
	<li class="" draggable="true">サラミ</li>
	<li class="" draggable="true">セメント</li>
	<li class="" draggable="true">オーケストラ</li>
</ul>

$(function() {
	dnd.init();
});

/**
 * NOTE: ua.isIEは、自分でどっかに作る
 */
var dnd = {
	init :function() {
		//dndしたいブツ
		if($('ul.lists').size()) {
			dnd.lists();
		}
		//dndしたいブツ2
		//if($('ul.lists2').size()) {
		//	dnd.lists2();
		//}
	}
	,dragSrcEl :null
	,lists :function() {
		//ここら辺を汎用的に引数とかカスタマイズしたら、便利に！？
		dnd.dragstart();
		dnd.dragover();
		dnd.dragenter();
		dnd.dragleave();
		dnd.drop();
		dnd.dragend();
	}
	,dragstart :function() {
		$('ul.lists li').on('dragstart', function(e) {
			this.style.opacity = '0.4';//ドラッグ跡が薄くなる
			dnd.dragSrcEl = this;
			e.originalEvent.dataTransfer.effectAllowed = 'move';//dnd開始
			if(ua.isIE) {
				e.originalEvent.dataTransfer.setData('text', this.innerHTML);
			} else {
				e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
			}
			return true;
		});
	}
	,dragover :function() {//ドラッグして関係ないとこで手放した時
		$('ul.lists li').on('dragover', function(e) {
			if (e.preventDefault) {
				e.preventDefault();
			}
			e.originalEvent.dataTransfer.dropEffect = 'move';
			return false;
		});
	}
	,dragenter :function() {//ドラッグ中、設置可能ポイント上に来た時の該当ポイント
		this.classList.add('over');
	}
	,dragleave :function() {//ドラッグ中、設置可能ポイントから外れた時の該当ポイント
		this.classList.remove('over');
	}
	,drop :function() {
		$('ul.lists li').on('drop', function(e) {
			if (e.stopPropagation) {
				e.stopPropagation();
			}
			if (dnd.dragSrcEl != this) {
				dnd.dragSrcEl.innerHTML = this.innerHTML;
				if(ua.isIE) {
					this.innerHTML = e.originalEvent.dataTransfer.getData('text');
				} else {
					this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
				}
			}

			return false;
		});
	}
	,dragend :function() {
		$('ul.lists li').on('dragend', function(e) {
			$('ul.lists li').each(function() {
				this.classList.remove('over');
				this.style.opacity = '1.0';//ざっくり薄い奴解除を全体に適応
			});
			var sort = new Array();
			$('ul.lists li').each(function(i) {
				//ここで順番とか拾ったりして
			});
			dnd.put(aaa, bbb);//ここでajaxで順番保存したりして
		});
	}
	,put:function() {
		//API処理とかね
	}
};