ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

● JQUERY SORTABLE

http://jqueryui.com/demos/sortable/
http://jqueryui.com/download ←ダウンロードはこちら

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

html

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、＜li＞要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data（PHP用） , data2（CSV形式）に入るのでそれをプログラムに渡すといいでしょう。
オプションは

revert: true , // アニメーションあり
cursor   : 'move'  // 移動中は十字カーソルに変更,
tolerance: 'pointer' , // 要素が重なった瞬間に入れ替え判定

がオススメです。

オプションの解説 : http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/